[Describing The UI] Conditional Rendering

👩 Conditionally returning JSX

---

특정 조건에 따라 다른 화면을 출력하는 것, 즉 Conditional Rendering은 rendering logic과 markup을 결합한 component의 장점이 잘 드러나는 부분 중 하나이다.

• If Else statement

Conditional rendering을 구현할 수 있는 가장 쉬운 방법은 if/else문을 이용하는 것이다.

function ItemList({ name, bought }) {
  if (bought) 
    return <li>{name} ✔</li>;
  return <li>{name}</li>;
}

ItemList component는 bought prop에 따라 다른 JSX tree를 반환하다.

• Conditionally returning nothing with null

그렇다면, 특정 조건에서 아무것도 rendering하고 싶지 않을 경우는 어떻게 해야할까? 이 경우에는 null을 반환한다.

function ItemList({ name, bought }) {
  if (bought)
    return null;
  return <li>{name}</li>;
}

이를테면, 위 예제에서 이미 산 목록은 출력을 하고 싶지 않을 경우, 즉 bought가 true인 경우 null을 반환한다.

👧 Conditionally including JSX

---

위의 if/else문 예시에서 condition에 따라 변하는 출력은 ✔이지만 이를 위해 li 태그 전체를 각 각 다시 출력하는 것을 알 수 있다. 다시 말해, <li className="item">...</li>의 코드가 중복된다.

• Conditional (ternary) operator (? :)

Ternary operator ? :를 통해 해당 코드를 보다 DRY하게 작성할 수 있다.

return (
  <li>
    {bought ? name + ' ✔' : name}
  </li>
);

• if-else vs ? :

If you’re coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different “instances” of <li>. But JSX elements aren’t “instances” because they don’t hold any internal state and aren’t real DOM nodes. They’re lightweight descriptions, like blueprints. So these two examples, in fact, are completely equivalent. Preserving and Resetting State goes into detail about how this works.

• Logical AND operator (&&)

Logical AND operator && 역시 conditional rendering에 사용하다. condition && value의 형태로 사용하며 관련 문법은 여기를 참고한다.

return (
  <li>
    {name} {bought && '✔'}
  </li>
);

Ternary Operator와 같다고 생각할 수 있으나, &&의 경우 해당 condition이 false일 경우 아무것도 render되지 않는다. 따라서 condition ? value : null과 동일한 역할을 한다고 생각하자.

💡 React considers false as a “hole” in the JSX tree, just like null or undefined, and doesn’t render anything in its place

또한 &&를 이용한 conditional rendering을 보면 알 수 있듯이, React는 false 역시 아무것도 render하지 않으며 null과 undefined 역시 동일하다.

🚨 Do not put numbers on the left side of &&. && 연산자의 경우 첫번째 falsy value를 반환하기 때문에, 0 && value의 형태로 사용할 경우 0이 render된다.

• Conditionally assigning JSX to a variable

반드시 markup을 이용해 conditional rendering을 구현할 필요는 없다. if - else 혹은 ? : 등을 markup내에 과도하게 사용할 경우 코드가 보다 난해해질 가능성이 크다.

let itemContent = name;
if (bought) itemContent += " ✔";

return (
	<li>
      {itemContent}
    </li>
)

따라서 항상 같은 JSX를 반환하지만, JSX 내의 변수들을 조건에 따라 재할당함으로써 conditional rendering을 구현할 수 있다.

🥞 Pages to link

---

• Preserving and Resetting State