JavaScript TypeError 해결: 상태 초기값 설정

🔒 배경

소설 소개말을 등록하는 컴포넌트에서 사용자가 내용을 입력하지 않고 제출 버튼을 누르면 아래와 같은 에러가 발생했다.

const onClick = () => {
    if (postNovel.description.length === 0) {
      dispatch(setToastOpen({
          open: true, type: 'error', message: MESSAGE.ERROR.WRITE_DESCRIPTION
      }));
  } else if (postNovel.descriptionLength >= 100) {
      dispatch(setToastOpen({
          open: true, type: 'error', message: MESSAGE.ERROR.DESC_INVALIDATION
      }));
  } else {
      postMainNovel();
  }
};

postNovel.description이 비어있는 상태에서 제출 버튼을 누르면 경고 메세지를 띄워주도록 조건문으로 처리했는데, 의도한 경고 메세지가 아닌 위와 같은 typeError가 발생했다.

🔐 원인

확인을 위해 postNovel.description을 콘솔에 출력해본 결과 아래와 같이 undefined가 나왔다.

postNovel은 Redux를 통해 관리되는 상태값이었는데, 별도로 description에 대한 초기값을 설정하지 않아 undefined로 할당되고 있었다.

🔓 해결

postNovel의 initialState에 description: '' 을 추가하여 초기값을 빈 문자열로 세팅했다.

적용 후 postNovel.description의 값을 다시 콘솔에 출력해보니 아래와 같이 빈 스트링으로 반환되었고,

의도한대로 description.length === 0 조건이 적용되어 경고 메세지가 잘 출력되는 것을 확인할 수 있었다.