5. JSX

JSX

자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생김

 

JSX의 장점

1. 가독성도 높아 보기 쉽고 익숙하다.

2. JSX에 오류가 있다면 감지한다.

3. div나 span 같은 HTML 태그를 사용할 수 있을 뿐만 아니라, 앞으로 만들 컴포넌트도 JSX안에서 작성할 수 있다.

 

JSX 문법

1. 감싸인 요소 : 컴포넌트에 여러 요소가 있다면 부모 요소 하나로 꼭 감싸야 한다.

 

1-2 Fragment : 리액트 v16 이상에서는 Fragment 컴포넌트가 있다. div 같은 것으로 감싸지 않고 여러 요소를 렌더링하고 싶다면 리액트를 불러올 때 Component 와 Fragment를 불러와서 아래와 같이 사용

2. 자바스크립트 표현 : JSX 내부에서 자바스크립트 표현식을 쓰려면 코드를 { } 로 감싸면 된다.

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

- JSX 내부에서 if 문을 사용할 수는 없다. 하지만 조건에 따라 다른 것을 렌더링해야 할 때는 JSX 밖에서 if 문을 사용하여 작업하거나, { } 안에 조건부 (삼항) 연산자를 사용하면 된다.

4. &&를 사용한 조건부 렌더링 ( 특정 조건을 만족할 때와 만족하지 않을 때)

5. 인라인 스타일링

6. class 지정

CSS 파일 내 사용자 정의 클래스 지정

리액트에서 class 를 설정할 때는 className 으로 설정해야 한다. class 는 이미 자바스크립트에 존재하는 키워드이다.

7. 꼭 닫아야 하는 태그

HTML 에서 예를들자면 <br> 같은 경우 코드를 닫지 않아도 전혀 문제가 없다. 하지만 JSX 에서는 Virtual DOM 에서 트리 형태의 구조를 만들지 못하기 때문에 오류가 발생한다. JSX에서는 다음과 같이 언제나 코드를 닫아야 한다.