Cannot read properties of undefined (reading 'map') (undefined.map은 불가/ 렌더링과 관련된 에러)

map함수를 사용하면 자주 만나는 에러..!!

 

이번에도 프로젝트를 만들면서 만났다

해결방법은 간단한데, 왜 이런것이 발생했는지 원인이 궁금해서 공부하다보니 시간이 좀 오래 걸렸다.

이유는 렌더링과 관련이 있었다!

 

🔍 원인

map은 배열에만 사용할수 있다.

위의 에러에 적힌것처럼 undefined.map은 사용X

 

🤔 그러면 왜 undefined가 들어오는 걸까?

리액트는 컴포넌트의 상태(state)나 속성(props)의 값이 변경될때마다 자동으로 렌더링을 수행한다.

하지만 데이터를 비동기적으로 받아올때는, 데이터가 들어오지 않았음에도 렌더링이 실행될 수가 있다.

데이터가 아직 도착하지 않았지만 리액트는 array.map()을 실행한다. 이때 array는 아직 정의되지 않은 undefined 상태이므로 오류가 발생한다.

 

 

 

✅ 해결

?. 옵셔널체이닝 연산자 사용하기

Data?.map((...) )

옵셔널체이닝 연산자를 통해 데이터가 도착하기 전에는 화면에 렌더링하지 않도록 처리한다. 

 

➡️  "값이 undefined가 아닐때만 실행해라!!" 라는 의미.

 

 

❌ 이전코드

{formattedData.map((books) => {
            return (
              <BookCard
                key={books.id}
                books={books}
                setSelectedBook={setSelectedBook}
              />
            );

 

✅ 수정한코드

{formattedData?.map((books) => {
            return (
              <BookCard
                key={books.id}
                books={books}
                setSelectedBook={setSelectedBook}
              />
            );

 

👍 이렇게하면 이제 에러가 발생하지 않고 잘뜬다 👍

 

 

🕵️‍♀️ 느낀점

. 을 .?로 바꾸는것으로도 "undefined이 아닐때만 실행하라"라는 의미를 가진다는 것이 흥미롭다.

내 전공이 언어쪽이어서 그런지 몰라도 코드를 공부할때 언어적인 면이 나올때마다 더 재미가 있다고 느끼는 것 같다.

.하나 ?하나로도 다른 결과가 나오는것이 코드라는 것이 얼마나 예민한 것인가 생각이 들기도 한다.

하지만 반대로 생각해봐도, 우리가 쓰는 언어도 그런점이 있는 것이다. 조사하나가 들어가는지 아닌지에 따라서도 문장 전체의 의미가 달라지기도 하니까 말이다.