(react) jsx 작성 시 유의사항

하나의 부모 요소

React에서 사용하는 Virtual DOM은 효율적인 컴포넌트 변화를 감지를 위해 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문

 

// 올바른 예
<div>
  <h1>제목</h1>
  <p>내용</p>
</div>

// 잘못된 예
<h1>제목</h1>
<p>내용</p>

 

 

속성 사용 시

• 카멜케이스(camelCase): HTML과 달리 class 속성은 className, for는 htmlFor 등과 같이 camelCase로 작성
• boolean 속성: boolean값은 true인 경우에만 작성하며, false인 경우에는 생략 가능

<div className="my-class" isVisible={true} />

 

 

자바스크립트 표현식

JSX 내에서 자바스크립트 표현식을 사용은 중괄호 안에 작성. (변수, 함수 호출 등을 사용)

const name = '홍길동';
const element = <h1>Hello, {name}!</h1>;

 

 

스타일 작성

JSX에서 스타일을 지정할 때는 JavaScript 객체를 사용하며, CSS 속성 이름은 camelCase로 작성

<div style={{ color: 'red', fontSize: '1rem' }}></div>

 

 

주석

JSX에서는 HTML과 동일하게 사용.

{/* 요기 JSX 주석 작성해봄 */}
<div>
  {/* 여기는 렌더링 NoNoNo~ */}
  {console.log('콘솔 출력 Test')}
</div>

 

 

키(key)

리스트 렌더링 시 각 요소에 고유한 key prop를 지정해야 함. react는 이 key를 사용하여 요소들을 효율적으로 업데이트하고 재사용 한다고 함.

const items = ['사과', '바나나', '딸기'];
const itemList = items.map(item => <li key={item}>{item}</li>);

 

 

이벤트핸들러(Event Handler)

onClick, onMouseOver 등 HTML 이벤트와 유사항 이벤트 핸들러를 사용 가능.

<button onClick={() => alert('버튼 클릭!')}>클릭</button>

 

 

 

참고 및 더 자세한 정보는 요기 ☞  https://ko.legacy.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React