[React] Props 값이 없을 경우를 대비해..

상위 부모 요소에서 props를 받아올 때, 만약 해당 props이 undefined의 형태등으로 받아올 수 없을 때, React에서는 default로 props를 설정할 수 있다.

1. 부모요소 코드

function App() {
  const dummyList = undefined
  return (
    <div className="App">
      <DiaryEditor />
      <DiaryList diaryList={dummyList} />
    </div>
  );
}

2-1. defaultProps 설정하기

const DiaryList = ({ diaryList }) => {
  return (
    <div>
      <h2>일기 리스트</h2>
      <h4>{diaryList.length}개의 일기가 있습니다.</h4>
      <div>
        {diaryList.map((li) => (
          <div>
            <div>작성자 : {li.author}</div>
            <div>글 내용 : {li.content}</div>
            <div>기분 : {li.emotion}</div>
            <div>만든 날 : {li.created_date}</div>
          </div>
        ))}
      </div>
    </div>
  );
};
DiaryList.defaultProps = {
	diaryList = [],
}

다음과 같이 default props를 설정하면 undefined error를 해결할 수 있다.

2-2. 인자로 받아올 때 처리하기

const DiaryList = ({ diaryList = [] }) => {
  return (
    <div>
      <h2>일기 리스트</h2>
      <h4>{diaryList.length}개의 일기가 있습니다.</h4>
      <div>
        {diaryList.map((li) => (
          <div>
            <div>작성자 : {li.author}</div>
            <div>글 내용 : {li.content}</div>
            <div>기분 : {li.emotion}</div>
            <div>만든 날 : {li.created_date}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

난 개인적으로 인자로 받아오는 곳에서 처리하는 것이 직관적인 것 같은데,
만약에 받아와야 할 요소들이 많아지는 경우엔 defaultProps로 정의하는 것이 깔끔할 것 같다.