[Frontend/React] 17. 가독성을 높이는 조건부 렌더링 방법

조건부 렌더링이란?

컴포넌트 렌더링시 특정한 값에 따라 선택적으로 렌더링 하는 것을 조건부 렌더링이라고 합니다. 조건부 렌더링을 무분별하게 사용을 하면, jsx 코드는 금방 복잡해집니다. 따라서 jsx 부분에서 더 좋은 코드에 대한 고민을 끊임없이 해야 합니다.

 

우선 삼항 연산자보다는 && 연산자를 사용하는 것을 추천합니다. 이 연산자를 사용하면 끝에 null을 붙이지 않아도 되기 때문입니다.

 

삼항연산자 사용

isLogined ? <div></div> : null

 

&& 사용

isLogined && <div></div>

 

---

조건부 렌더링 시 주의할 점

&& 연산자 앞에 사용되는 값이 null 이나 undefined 가 될 수가 있는 값이라면 아래와 같이 조건을 명확히 하여 조건부 렌더링을 해줄 필요가 있습니다.

 

{cash != null && <p>{cash}원 보유 중</p>}
{username != undefined && <p>{username}</p>}

 

위와같이 null 이나 undefined 값이 들어간다면 항상 조건부 렌더링이 필요하기 때문에, 이러한 코드를 줄이기 위해서는 항상 초기에 빈 값을 넣어주는 것이 좋습니다. 그러면 불필요한 조건부 렌더링이 필요 없겠죠?

 

cash = 0;
username = '';

jsx = (
  <>
    {<p>{cash}원 보유 중</p>}
    {<p>{username}</p>}
  </>
)

 

 

 

 

---

출처 : 실전 리액트 프로그리맹 - 인프런 (추천합니다 !!)

실전 리액트 프로그래밍 - 인프런