JSX

src/App.js

 

JSX

자바스크립트의 확장 문법이며 이 코드는 브라우저에 실행되기 전에 코드가 변환하는 과정을 거친다. 다음과 같은 예시로 설명하겠다.

이렇게 변환하는 이유는 개발을 편한하게 하기 위함이다. 프로그래머가 매번 React.createElement 함수를 호출한다면 매우 불편하다.

 

JSX 문법

1. 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 이렇게 하는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 트리 형식으로 이루어져 있기 때문이다.

 

2. 자바스크립트 표현

JSX 코드 내부에 자바스크립트를 사용하고 싶다면 {}로 감싸라.

 

3. if문 대신 조건부 연산자

JSX 내부에서 if문을 사용할 수 없다.

 

4. AND 연산자를 사용한 조건부 렌더링

특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아예 아무것도 렌더링하지 않아야 하는 상황이 올 수 있다. 이럴 때는 AND 연산자를 사용해 조건부 연산자를 더 간결하게 할 수 있다.

 

5. undefined는 렌더링하지 않기

컴포넌트가 undefined를 반환해서 렌더링하면 안된다. undefined가 생길 경우에 OR 연산자로 오류를 방지할 수 있다.

 

6. 인라인 스타일링

DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어야 한다. 

 

7. class 대신 className

html에서 css 클래스를 사용할 때 <div class="myclass"></div>와 같이 사용하는데, JSX에서는 className으로 사용한다.

 

8. 주석

주석은 {/*~~~*/} 이와 같은 형태로 사용한다.