[React] JSX로 UI 표현하기

JSX란?

JSX란 JavasScript와 HTML의 장점을 결합하여 효율적으로 UI를 구성하는데 도움을 주는 확장된 자바스크립트 문법이다.

JSX를 사용하면 JavaScript와 HTML을 혼용하여 사용할 수 있습니다.

 

JSX 주의 사항

1. 중괄호 내부에는 자바스크립트 표현식만!

{} 내부에는 자바스크립트의 표현식만 넣을 수 있다. 즉, 한 줄의 코드가 특정한 값으로 표현되어야 하기 때문에, if문과 for문은 사용할 수 없다. 대신 삼항 연산자(조건 ? true값 : false값)를 사용해 조건에 따라 값을 표시하거나, map을 사용해 반복적인 렌더링을 할 수 있다.

 

2. 숫자, 문자열, 배열의 값만 렌더링된다.

숫자, 문자열, 배열의 값은 잘 렌더링되지만, boolean값, undefined, null은 화면에 렌더링되지 않는다. 또한 객체를 그대로 렌더링하려고 하면 오류가 발생하게 된다. 객체를 출력할 때에는 점표기법을 통해 특정 속성에 접근하거나 문자열로 변환해야 한다. 예를 들어 {user.name}와 같이 객체의 프로퍼티를 직접 호출하면 안전하게 렌더링할 수 있다.

 

3. 모든 태그는 닫혀 있어야 한다.

HTML과 마찬가지로 모든 태그는 반드시 닫혀야 한다. 셀프 클로징 태그도 <img />처럼 마지막에 슬래시(/)를 붙여서 닫아줘야 한다!

 

4. 최상위 태그는 반드시 하나여야 한다.

최상위 태그란 리턴문의 소괄호 안에서 가장 높은 위치에 있는 태그를 말한다. 감쌀만한 마땅한 태그가 없다면 <></> 빈 태그를 사용하여 묶어주면 된다.