TIL - JSX란?

JSX란?

JSX(JavaSciprt XML)란? 자바스크립트의 확장 문법이며 리액트 프로젝트를 개발할 때 사용되는 문법이다. JSX를 사용하면 코드를 작성할 때 HTML 코드를 작성하는 것과 비슷하기 때문에 가독성이 높아지고 작성하기도 쉬워진다.

JSX를 사용할 때 주의해야 할 점

1.   JSX를 사용할 때 컴포넌트에 여러개의 요소가 존재한다면 반드시 하나의 부모요소로 감싸야한다. (하나의 요소만 존재한다면 감싸지 않아도 된다.)
2.   JSX 내부의 자바스크립트 표현식에서는 if문 사용이 불가능하다. 그래서 조건에 따른 내용을 렌더링 해줄 때에는 삼항 연산자를 이용해야 한다.
3.   JSX에서 CSS 클래스를 사용할 때는 class가 아닌 className으로 설정해 주어야 한다. (id는 그대로 id값을 사용한다.)
4.   JSX에서 주석을 작성할 때는 {/주석/}의 형식으로 작성해야 한다.
5.   무조건 한개의 엘리먼트를 반환해야 한다..
6.   JSX에서 자바스크립트 값을 가져오기 위핸 중괄호를 사용한다.
7.   JSX에서 인라인으로 스타일 값을 주기 위해선 CSS형식이 아닌 JSON형식으로 작성한다.
8.   사용자 정의 컴포넌트는 대문자로 시작해야한다.
9.   map 메소드 사용시 key 속성을 부여해야 한다.

출처

리액트를 다루는 기술(김민준) 51p~ 66p