[React 기본] 2. JSX 문법

 

 

 

 

 

 

개인 공부 후 자료를 남겨놓기 위한 목적이므로,
생략되거나 오류가 있을 수 있음을 알립니다.
설명에 대한 지적은 언제나 환영입니다. :)

 

 

---

들어가기에 앞서.

 

앞선 포스팅에서 우리가 계속해서 다루게 될 파일이라고 한 App.js를 봐보자.

 

뭔가 이상한 점을 확인할 수 있다.  그건 바로 javascript 파일 안에 html 문법이 있다는 것인데

 

놀랍게도 이 코드는 정상적으로 작동한다.

 

이 문법은 react에서 사용하는 JSX라고 하며 쉽게 말해 개발자들이 리액트를 좀 더 쉽게 개발하기 위해

 

html과 js를 섞어놓았다고 생각하면 된다.

 

물론 JSX 문법을 사용하지 않을 수도 있으며 이 경우에는 React.createElement('div', null, "Hello, World!") 와 같은 방법으로 코드를 넣어주어야 한다.

 

 

중요!

JSX에서 html을 작성할 때에는 항상 return 값으로 html을 작성해주어야 하며

return 안에는 하나의 태그만이 존재해야만 한다!

 

JSX App.js의 가장 기본적인 형태

 

 

---

JSX 문법

JSX에서 사용하는 가장 기본적인 문법 몇가지를 알아보고 가도록 하자.

 

 

 

Class

일반적인 html 문법에서는 태그의 class를 설정할 때, 다음과 같은 문법을 사용한다.

 

 

하지만 JSX는 자바스크립트 안에서 html을 작성하는 것이므로 class를 그대로 사용하게 되면 리액트가 해당 class가 html인지 js인지 알 수가 없다.

 

따라서 JSX에서는 class를 표현할 때 다음과 같이 className이라고 사용한다.

 

(리액트에서는 카멜케이스가 기본이 된다.)

 

 

 

 

 

 

 

중괄호 문법

vue와 같은 곳에서의 중괄호와 사용법이 유사하다.

 

우리가 블로그에 관한 코드를 작성한다고 하자. 해당 코드에서 제목이 계속해서 바뀐다고 하면,

 

이렇게 작성할 시, 우리는 끊임없이 코드의 여러 부분을 수정해야만 한다. 

 

 

이러한 불필요한 반복을 막기 위해 중괄호 문법이라는 것이 사용된다.

 

(실제 웹페이지에서는 백엔드나 서버에서 데이터를 가져오게 될 것임)

 

다음의 post는 서버에서 가져온 것이라 생각하자.

 

기존의 자바스크립트 문법에서는 다음과 같이 innerHTML을 이용하여 변수를 넣어주어야 했지만,

 

 

중괄호 문법을 사용한다면 아주 간단한 방법으로 데이터를 넣어줄 수 있다.

 

 

이는 태그 안의 내용뿐만 아니라, className이나 id등 거의 모든 공간에 사용이 가능하다.

 

이 중괄호 문법은 데이터 바인딩 이라고도 표현한다. (프론트엔드에서 매우 중요함)

 

 

 

 

 

style

우리가 일반적인 html에서 태그에 style을 넣어줄 땐 다음과 같이 코드를 작성한다.

 

 

하지만 JSX에서 스타일을 작성할 땐, 아래와 같은 방법으로 데이터 바인딩을 통해 해당 코드를 작성해야 한다.

 

 

보다싶이 데이터바인딩안의 또 다른 중괄호를 이용하여 스타일을 작성해주어야 한다.

 

 

+ 주의사항

css에서의 font-size와 같은 " - "가 들어간 코드의 경우에는 JS에서 " - "를 연산자로 취급하기 때문에 

fontSize와 같은 카멜케이스를 사용해야 한다.