Describing the UI ☞ Conditional Rendering

https://react.dev/learn/conditional-rendering을 읽고 정리한다.

컴포넌트는 종종 조건에 따라 다른 것을 보여줄 필요가 있다.

리액트에서는 JS 문법(if, &&, ? :)을 사용해 조건에 따라 JSX를 렌더링 할 수 있다.

조건에 따라 JSX를 반환하기

PackingList 컴포넌트는 여러 Item들을 렌더링 한다.

Item 컴포넌트들은 isPacked prop이 true가 되면 checkmark(✔)를 추가하고 싶다고 하자.
이는 if/else 문 사용해 해결할 수 있다.

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

 

조건에 따라 아무것도 반환하지 않기(null)

몇 가지 상황에서, 아무것도 렌더링 하고 싶지 않을 수도 있다. 예를 들어, isPacked===true인 아이템을 보여주고 싶지 않을 수도 있다. 하지만 컴포넌트는 항상 무언가를 반환해야 하므로, 이 경우 null을 리턴할 수 있다.

if (isPacked) {
  return null;
}
return <li className="item">{name}</li>;

실제로 null을 반환하는 것은 일반적이지 않다(렌더링 하려는 개발자를 놀라게 할 수 있기 때문ㅜㅜ).
더 자주 사용되는 방법으로, 부모 컴포넌트의 JSX에서 조건에 따라 특정 컴포넌트를 포함하거나 제외하는 방법이 사용된다. 그 내용은 다음 문단에서 설명하겠다.

조건에 따라 JSX를 포함하기

이전 예제에서는 컴포넌트를 반환하는 것으로 JSX 트리를 컨트롤했다. 렌더 출력에서 아래와 같은 중복이 발생한다.
아래 두 가지 코드는 거의 비슷하다.

<li className="item">{name} ✔</li>

<li className="item">{name}</li>

이러한 중복은 최악은 아니지만, 코드를 유지 보수하기 어렵게 만들 수 있다.

• 만약 className을 변경하고 싶다면? 두 번 고쳐야 한다!

반복 작업을 제거하기 위해 JSX에서 조건 연산자를 사용할 수 있다.

조건 연산자 사용하기(? :)

isPacked === true이면, name + ' ✔'를 렌더링 하고, 아니면 name을 렌더링 한다.

<개선 전>

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

<개선 후>

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

다른 HTML 태그에서 item의 텍스트를 더 복잡하게 만들고 싶다고 하자.
케이스마다 많은 JSX 중첩을 쉽게 하기 위해 줄 바꿈과 괄호를 사용해 추가할 수 있다.

이 스타일은 간단한 조건일 때 적합하다. 만약 컴포넌트가 조건을 가진 마크업이 중첩되고 너무 많으면 지저분해지기 때문에 자식 컴포넌트를 추출하여 정리하는 것을 고려해야 한다. React에서 마크업은 코드의 일부임으로 변수나 함수와 같은 도구를 사용해 복잡한 표현식을 정리할 수 있다.

And 연산자(&&)

또 다른 일반적인 방법은 JS의 AND 연산자를 사용하는 것이다. 리액트 컴포넌트들에서, 조건이 true일 때만 아니면 일부 JSX를 렌더링 하고 그렇지 않으면 아무것도 렌더링 하지 않을 때 자주 사용된다.
&&를 사용해 조건적으로 isPacked가 true일 때 체크 마크를 렌더링 할 수 있다.

return (
  <li className="item">
    {name} {isPacked && '✔'}
  </li>
);

&& 문법은 왼쪽의 조건이 true일 때만 오른쪽의 값을 반환한다. 하지만, 왼쪽의 조건이 false라면, 전체 조건식을 false가 된다.
리액트는 false를 JSX 트리에서 "hole"로 인식하며, 이는 null 또는 undefined와 같다. 그리고 이 부분은 아무것도 렌더링 하지 않는다.

Pitfall : && 왼편에 숫자를 넣지 마라.

조건을 테스트하기 위해, JS는 자동적으로 왼편을 불리언으로 변환한다.
그러나, 왼편에 0이 있으면 리액트는 0을 렌더링 하게 된다.

예를 들어, 흔히 하는 실수로 messageCount && <p>New messages</p>같이 코드를 작성한다.
이 코드는 messageCount가 0일 때 아무것도 렌더링 하지 않는 것으로 생각하지 싶지만, 실제로는 0 자체를 렌더링 한다.

따라서 고치기 위해, 왼편을 불리언 값으로 만들어야 한다.
=>messageCount > 0 && <p>New messages</p>

변수를 이용해 조건적으로 JSX를 할당하기

코드를 작성할 때 위의 간단한 문법이 방해가 된다면, if문과 변수를 사용할 수 있다.

1. 변수를 정의할 때 let사용하면 값을 재정의할 수 있으므로, 처음엔 보여주고 싶은 기본 내용(name)을 할당한다.
2. let itemContent = name;
3. if문을 사용해 isPacked가true일 때만 itemContent를 재할당한다.
4. if (isPacked) { itemContent = name + " ✔"; }
5. 반환할 JSX 트리 안에 중괄호를 사용해 변수를 추가한다.(중괄호를 사용해 JS를 문법을 사용 가능)
6. <li className="item"> {itemContent} </li>

이 스타일은 이전보다 간단하진 않지만, 가장 유연하다.

이전에는 텍스트만 사용했지만, JSX도 가능하다.