(이어서)
조건부 렌더링
- 컴포넌트는 조건에 따라 다른 것을 보여줘야 하는 경우가 많음.
- React에서는 JavaScript 문법을 사용해 조건부로 JSX를 렌더링할 수 있습니다.(
if, &&, ? : )
조건부로 JSX 반환하기
isPacked 라는 boolean형 props로 Item 컴포넌트에서 반환하는 JSX를 구분- 예시
조건부로 null 사용해서 아무것도 반환하지 않기
- 특정 상황에 따라 화면에 어떠한 것도 렌더링하고 싶지 않다 ⇒
null을 반환
- 예시 (packing한 item이면 화면에 보여주지 않기)
- 실제로 컴포넌트에서
null을 직접적으로 반환하는 것은 지양(💡)
- 개발자가 렌더링하려고 할 때 놀랄 수 있기 때문
- 부모 컴포넌트 JSX에서 컴포넌트를 조건부로 포함하거나 제외할 수 있다
조건부로 JSX 포함시키기
if (isPacked) {
return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;