마운트 될 때 업데이트 되지 않은 props의 key에 접근하는 오류 해결하기

관련 코드

const ImageAlbums = ({ filter, channels }) => {
  console.log('channels', channels);
  console.log('channel 0th id', channels[0]?._id);

  // 마운트 될 때는 prop이 비어 있는데 비어 있는 상태에서 내부 키를 조회할 경우 에러가 발생하므로 처리해준다.
  if (!channels[0]) {
    return null;
  }

  return (
    <>
      {filter === 'show_recent' ? (
        <ImagePosts channelId={channels[0]?._id} />
      ) : (
        <ul>
          {channels.map((channel) => (
            <li key={channel._id}>
              <ImagePosts channelId={channel._id} />
            </li>
          ))}
        </ul>
      )}
    </>
  );
};