6화: Conditional Rendering

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

Unsplash의 Mathew Schwartz 님 사진

공식 문서

https://react.dev/learn/conditional-rendering

Conditional Rendering – React

JSX 조건부 렌더링

자바스크립트 구문을 이용하면 특정 조건에 따라 JSX를 다르게 렌더링할 수 있다. 문서에서는 네 가지 예시를 소개한다.

• if/else 를 이용한 조건부 렌더링
• null 을 return하여 본인의 렌더링 막기
• 가 ? 나 : 다 를 활용한 조건부 렌더링
• 가 && 나 를 써서 가가 참이면 나를 렌더링하고 거짓이면 하지 않기

조건부 렌더링과 instance

// 경우 1
if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;

// 경우 2
return (
  <li className="item">
    {isPacked ? name + ' ✔' : name}
  </li>
);

경우 1의 두 반환값은 서로 다른 instance를, 경우 2는 하나의 instance를 반환하는 것처럼 보이는데 경우 1과 2는 완전히 같을까?
같다.
JSX element는 instance가 아니다. 내부적으로 상태를 갖고 있지 않으며, 실제 DOM 노드도 아니기 때문이다. JSX는 단순히 청사진에 불과하기 때문에 두 경우는 완전히 같다고 할 수 있다. 리액트 컴포넌트의 상태는 JSX가 기억하는 게 아니라 리액트가 UI 트리에서 컴포넌트의 위치를 이용해 기억해준다.