리덕스 툴킷 prac 중, 겪은 트러블 슈팅에 대해 남긴다!

겪은 증상

이 에러를 해석해 보자면 react-dom.development.s 파일에서 발생한 에러고,
발생지점은 App컴포넌트 내부이며....
오류 메시지에서는 에러 처리 동작을 사용자 정의하기 위해 트리에 에러 바운더리(error boundary)를 추가하는 것을 고려하라고 언급하고 있습니다. 에러 바운더리는 React에서 오류를 처리하고 UI에 대체 콘텐츠를 표시하는 방법을 제공합니다. 더 자세한 내용은 https://reactjs.org/link/error-boundaries 주소에서 에러 바운더리에 대해 자세히 알아볼 수 있습니다.
여기서는 더 구체적인 오류 내용이 제공되지 않아 오류의 원인을 정확히 파악할 수 없습니다. 컴포넌트 내부를 검토하고 에러 바운더리를 추가하여 오류 처리 동작을 개선해야 합니다.

아... 당혹스럽다... 원인을 찾기 힘들다...

결국 코드를 훑어 나가며 찾아 나선다.

해결

솔루션 1

초기 상태 설정: useState(null)을 사용하여 todos 상태를 null로 초기화했는데. 이는 todos.map()이 null 값일 때 오류를 발생시킬 수 있었다.

• con) 이 문제를 해결하기 위해 초기 상태를 빈 배열([])로 설정하여 해결.

솔루션 2

await 때문에 아래 코드(map)이 먼저 실행되면서 null 값이 되어 에러가 발생 하는것을 확인했다.

• con) 옵셔널 체이닝을 통해 해결 가능!

옵셔널 체이닝(Optional Chaining)

객체의 속성에 접근할 때, 해당 속성이 null 또는 undefined인 경우에도 오류 없이 안전하게 접근할 수 있는 기능

• 기존에는 객체 체인에서 중간에 위치한 어떤 속성이 null 또는 undefined인 경우, 해당 속성에 접근하려고 할 때 TypeError가 발생했다.
  - ex) object1.object2.object3 와 같은 체인에서 object2가 null 또는 undefined인 경우 object3에 접근하려고 하면 오류가 발생한다.

• 옵셔널 체이닝 연산자인 ?.을 사용하면 이러한 상황에서 오류를 발생시키지 않고 접근을 시도할 수 있다.
  - ex)object1?.object2?.object3와 같이 사용하면 object1, object2, object3 모두 존재하는지 확인하고 안전하게 접근할 수 있습니다. 만약 중간에 null 또는 undefined가 있으면 평가는 멈추고 undefined를 반환한다.

옵셔널 체이닝은 특히 객체의 프로퍼티를 안전하게 접근해야 할 때 유용하다. 데이터를 다루는 작업에서 예상치 못한 null 또는 undefined 오류를 방지하고 코드를 간결하게 유지할 수 있도록 도와준다.