[복습]React 주요 개념 정리 - JSX

JSX문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜줌으로써 화면을 그려주기때문에 

중요하게 알고 넘어 갈 필요가 있다!

 

자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰 작업을 편하게 할 수 있게 하기위해 나온것이다.

 

1. JSX 규칙

- 태그는 꼭 닫아주어야 한다.

- return 아래에 무조건 1개의 엘리먼트를 반환하기

- JSX에서 자바스크립트 값을 가져오려면 중괄호를 사용한다.

  (값 뿐만아니라 map , 삼항연산자 등 자바스크립트 문법을 JSX안에 쓸때에도 중괄호를 사용한다.)

- class 대신 className 으로 사용한다.

- style은 인라인으로 주기

<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

→ 중괄호를 두번주는 이유는 딕셔너리도 자바스크립트이기때문에 중괄호안에 사용해야하므로 두번 작성하도록 되어야한다.