react - 조건적 렌더( Conditional Rendering )

Conditional Rendering

component들은 종종 상황에 따라 다르게 표시해야하는 상황이 필요하다.
React는 JavaScript 문법인 if, &&,? : 를 이용하여 JSX를 다르게 표시해줄 수 있다.

Conditionally returning JSX

if 문법을 통해서 JSX를 다르게 rendere 해줄 수 있다.

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

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />       
      </ul>
    </section>
  );
}

Conditionally returning nothing with null

component는 항상 어떤 것을 return 해야한다.
아무 것도 render 되지 않길 원할 떄는 null을 return 해주면 된다.
실제로 null을 return 하는건 보편적이지는 않다. 보통은 parent component에서 해당 component를 보여줄지 결정한다.

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

Conditionally including JSX

우리는 상황에 따라 render하는 JSX를 변경하기 위해서 아래와 같이 코드를 썼다.
하지만 해당 코드는 DRY해보이지 않는다.
무엇보다 코드에 중복이 있을 경우 관리가 힘들다. (className이 변경될 경우 일일이 찾아서 변경해줘야한다.)

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

Conditional (ternary) operator (? :)

Conditional operator라고 불리는 ? : 연산을 이용하여 위의 코드를 DRY하게 만들어보자.
if isPacked가 true이면 name을 render하고, 그렇지 않으면(false이면) name + ' ✔ '를 return 한다.

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

해당 연산은 간단할 경우는 잘 동작하지만, 중첩된 조건이 많을 경우 의미파악이 어렵고 코드가 지저분해질 수 있다.
그럴 경우에는 child components를 이용하여 정리하는 것이 좋다.
React에서 마크업은 코드이기 때문에 변수 및 함수등을 사용하여 복잡한 표현식을 정리할 수 있다.

Logical AND operator (&&)

또 다른 보편적인 방법은 AND(&&) 연산자를 이용하는 것이다.
&& 연산자는 조건이 true일 때 JSX를 render하거나, 하지 않을 수 있다.

if isPacked가 true이면 ' ✔ '을 render하고, 그렇지 않으면(false이면) 아무 것도 render하지 않는다.

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

JavaScript && 표현식은 && 연산자 기준으로 왼쪽(isPacked)이 true인 경우 오른쪽('✔')의 값을 반환한다.
그러나 조건이 false이면 전체 표현식이 false가 된다.
React는 false를 null 또는 undefined와 마찬가지로 "hole"로 간주하고 그 자리에 아무 것도 렌더링하지 않는다.

!주의사항 : && 연산자의 왼쪽에는 숫자를 기입하면 안된다.

messageCount && <p>New messages</p>
//messageCount가 0일 경우 false가 되어 아무 것도 render하지 않길 의도했겠지만, 실제로는 0 자체를 render 한다.
//이래와 같이 boolean으로 조건문을 써야한다.
messageCount > 0 && <p>New messages</p>

Conditionally assigning JSX to a variable

연산자가 코드를 작성하고 읽기 어렵다면 if문과 변수를 사용하자.
let으로 정의된 변수를 재할당할 수 있으므로 표시하려는 기본 내용인 이름을 제공하여 시작합니다.

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = name + " ✔";
  }
  return (
    <li className="item">
      {itemContent}
    </li>
  );
}

https://beta.reactjs.org/learn/conditional-rendering

[Conditional Rendering

A JavaScript library for building user interfaces

beta.reactjs.org](https://beta.reactjs.org/learn/conditional-rendering)

Let's develop level up