[React] 배열, 객체 존재여부에 따른 조건부 렌더링

삼항연산자 사용하기

---

return data ? (render될 return값) : null;

&& 연산자 사용하기

---

• && 연산자를 통해 작성하고 바깥 부분을 <Fragment>로 감싸준다.

return (
  <>
  {data && (render될 return값)}
  </>
);

위 방법을 사용할 조건을 좀 더 세세하게 미리 만들어두고 사용하는 게 좋다.
받아올 데이터가 배열이라면 다음과 같이 작성할 수 있다.

isArray 로 배열인지 먼저 판단하고, 배열이 존재하면 안에 데이터가 있는지 length 로 판단한다.

const isData = Array.isArray(data) && data.length > 0;

return (
  <>
  {isData && (render될 return값)}
  </>
);

만약 데이터가 객체 타입이라면 Object.key 를 이용하면 된다.
Object.key 는 결과를 배열로 반환하므로 length 를 같이 써준다.

const isData = Object.keys(data).length > 0;

return (
  <>
  {isData && (render될 return값)}
  </>
);