[React] JSX 문법 사용 시 지켜야 할 규칙

 

[React] JSX에 대해 알아보기

 

 

1. 감싸인 요소

리액트 컴포넌트에서 요소 여러 개는 꼭 하나의 요소로 감싸주어야 한다. (root 필요)

 

이유🧐
Virtual DOM에서 컴포넌트 변화를 효율적으로 감지할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

 

2. 자바스크립트 표현

JSX 내부에서 코드를 { }를 감싸서 자바스크립트 표현식을 작성할 수 있다.

 

const name = 'Bonny';
return (
<>
<p>Hello, {name}!</p>
</>

 

3. ES6의 const, let

기본적으로는 const(상수)를 사용하고, 값을 유동적으로 변경해야 할 때 let 사용

var는 사용하지 않는다.

 

 

4. If문 대신 조건부 연산자

JSX 내부 자바스크립트 표현에서 if문을 사용할 수 없다.

 

조건에 따라 다른 내용을 렌더링해야 할 경우
1) JSX 밖에서 if문을 사용하여 사전에 값을 설정
2) { }안에 조건부 연산자 사용

 

<div>
{name === 'Bonny' ? (
<p> 안녕하세요, {name} </p>
) : (
<p> 다시 시도해주세요. </p>
</div>

 

AND 연산자(&&)를 사용한 조건부 렌더링

<div>
{ name === 'Bonny' && <p> 안녕하세요, {name} </p> }
</div>

리액트에서 false를 렌더링할 때는 아무것도 나타내지 않는다.

falsy한 값인 0은 예외적으로 화면에 나타남 주의하기!

 

 

5. undefined를 렌더링하지 않기

함수에서 undefined만 반환하여 렌더링하는 경우 에러가 발생한다.

 

🚨 에러 발생
function App() {
   const name = undefined;
   return name;
}

⭐️ OR(||) 연산자를 사용해서 에러 방지하기
function App() {
   const name = undefined;
   return name || '값이 undefned입니다.';
}

 

6. 기타

- 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태가 아니라 객체 형태로 넣어줘야 한다.

background-color -> backgroundColor 와 같이 카멜 표기법으로 작성한다.

 

- class 대신 className을 사용한다.

 

- 꼭 닫아야 하는 태그: self-closing (ex. <input />)

 

- JSX 내부에서 주석을 작성할 때는{/* 주석입니다 */ }와 같이 작성한다.