(1-2) React 기초 - JSX 활용

 

JSX 활용: JSX 활용법과 꼭 알아야 할 문법에 대해 알아보자.

주요 JSX 문법에 대해서 알아보자. JSX에서 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주어야 한다.

 

 

 

JSX 규칙

React에서 CSS class 속성을 지정하려면 "className"으로 표기해야 한다. 만약 class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의해야 한다.

 

 

 

JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 한다. 중괄호를 사용하지 않으면 일반 텍스트로 인식한다.

 

 

 

React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 한다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 된다. 이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부른다.

 

 

 

조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 한다.

 

 

 

React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용한다. map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 한다. "key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.