[React] TypeError: Cannot read properties of undefined (reading 'map')

2022.8.9 (화) 작성

1. 에러❗️

TypeError: Cannot read properties of undefined (reading 'map')

2. 상황

function Management({products, setProducts}) {
	...
	{products.map((el, idx) => (
	  <tr key={idx}>
	    <td>{el.product}</td>
	    <td>{el.price}</td>
	    <td>{el.count}</td>
	  </tr>
	))}

products 라는 state는 props로 받아온 것으로 초기값은 []이다.

npm run start 해서 브라우저로 앱을 볼 때는 에러가 없었지만, test 실행시 다음과 같이 프로퍼티가 undefined 라서 ‘map’을 찾을 수 없다는 에러가 뜬다.

3. 해결💡

1. 해당 오류는 첫 렌더시, 아직 구조분해할당으로 가져온 products 에 값이 들어가지 않아 생기는 에러였다. 이 때는 아직 products 가 undefined 라서 Array의 내장 메서드인 map 을 사용할 수 없는 것이다.
2. 즉, products 가 undefined 일 때를 예외처리해주면 된다.
3. 이 때, 삼항 연산자도 쓸 수 있지만 단축 평가를 활용한 렌더링이 코드가 짧다. 
4. 따라서 다음과 같이 작성해주면 undefined(=false) 일 때는 렌더가 안된다!

{/* products && 를 넣어주지 않으면 'map' undefined 가 뜬다. (테스트에서만) */}
{/* 첫 렌더링시 products에 데이터가 안들어와서 undefined 일때 map 메서드를 써서 발생하는 오류 */}
{products && products.map((el, idx) => (
  <tr key={idx}>
    <td>{el.product}</td>
    <td>{el.price}</td>
    <td>{el.count}</td>
  </tr>
))}

 

5. 알게 된 것✨

단축 평가 조건부 렌더링

{ false && <Component /> } ⇒ 렌더링 ❌

{ true && <Component /> } ⇒ <Component /> 렌더링 ✅

{ false || <Component /> } ⇒ <Component /> 렌더링 ✅

{ true || <Component /> } ⇒ 렌더링 ❌

👉  true & false 두 상황에서, 한 컴포넌트를 렌더하고 싶을 땐 단축 평가 사용!

• 기존에 삼항연산자를 쓸 때는 둘 중 하나의 상황만 렌더링 하고 싶을 때, 반대쪽엔 null 을 굳이 넣어주었다. 이렇게…
• ex) { isShow ? <Component /> : null }
• 하지만! 단축평가를 사용하면 null 을 굳이 넣을 필요가 없다!
• ex) { isShow && <Component /> }

👉 props에 기본값을 넣어줘도 된다!

function Management({products = [], setProducts}) {
	...
	{products.map((el, idx) => (
	  <tr key={idx}>
	...

👉 추가) 최신 문법 '옵셔널 체이닝'으로도 해결 가능

function Management({products, setProducts}) {
	...
	{products?.map((el, idx) => (
	  <tr key={idx}>
	...

https://ko.javascript.info/optional-chaining

옵셔널 체이닝 '?.'