[React] 4. 연산자를 이용한 조건부 렌더링

잘못 된 내용에 대한 지적은 언제든 환영입니다.

조건부 렌더링

• 조건부 렌더링이란 조건에 따라 렌더링 내용이 바뀌는 것을 말한다.
• JSX 코드 내부에 삼항 연산자와 논리 연산자를 이용하여 구현할 수 있다.

삼항 연산자 이용

return (
  {isVip ?
    <b>{name}님 께서는 현재 VIP 고객이십니다.</b> :
    <b>{name}님 께서는 현재 일반 고객이십니다.</b>
  }
);

• isTrue ? true : false 형태이며, isTrue의 참/거짓에 따라 값을 반환한다.
• 위와 같이 JSX 코드 내에서 참/거짓에 따라 렌더링 내용을 변경할 수 있다.

논리 연산자 이용

return (
  {isSunday && <b>일요일은 내가 짜파게티 요리사</b>}
);

• isTrue && true 형태로 사용할 수 있으며, isTrue가 참일 경우에만 값을 반환한다.
• 위와 같이 거짓이 아닌 참일 경우에만 렌더링할 시에 적합하다.

[번외1] isTrue={true} = isTrue

props의 값 셋팅을 생략하면 true로 자동 셋팅된다.

// 둘 다 같은 코드이다.
return (
    {/* <Hello name="Uncyclocity" isVIP={true} /> */}
    <Hello name="Uncyclocity" isVIP />
  );

[번외2] 조건부 스타일링

const style = {
  cursor: "pointer",
  color: user.active ? "green" : "black",
};

...

/* user.active의 T/F에 따라
user.username 글자 색이 초록/검정으로 표시된다.*/
return (
  <div>
    <b style={style}>{user.username}</b>
  </div>
);

• 연산자를 통한 조건부 스타일링 또한 가능하다.
• JSX 태그 인라인 스타일링 등 객체 리터럴({})로 스타일링을 하는 경우에만 해당된다.