[React] 부모-자식 간 Lifecycle & 조건부 렌더링

에러메시지를 읽어보면 말 그대로 undefined에 대하여 map 함수를 실행하려 했다는 뜻입니다. 분명 우리가 없는 값에 map을 사용하려 했던 건 아니었을텐데 말이죠.

하지만 이는 분명 해당 값이 어느 순간에는 비어있었다는 뜻이고, 상태값의 시점에 관한 문제라면 React의 Lifecycle과 연관이 있습니다.

우선 기본 Lifecycle과 부모 - 자식간 Lifecycle에 대해서 살펴본 뒤 아래 블로그를 통하여 에러가 발생할 경우 조건부 렌더링을 통한 해결 방법을 살펴보도록 하겠습니다.

Blog 자료 | React | Lifecycle

Lifecycle 기본 순서

1. constructor
2. render
3. componentDidMount
4. (fetch 완료)
5. render
6. (setState)
7. componentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)
8. componentWillUnmount

부모 - 자식 Lifecycle

• 부모 API에서 받은 데이터를 자식에게 props로 전달하여 자식 내부에서 데이터에 접근하여 사용하는 경우

아래 화면에서 왼쪽은 부모 컴포넌트, 오른쪽은 자식 컴포넌트 입니다. 화면을 보며 console.log가 찍히는 순서를 유추해보세요! 아래 순서 정답이 있습니다 😎

부모 - 자식 Lifecycle 순서

React | Lifecycle

🚨 주의 : React.StrictMode에 의해 특정 라이프사이클 메서드가 2번 불릴 수 있음 (문제 X, 정상 O)

Strict 모드가 자동으로 부작용을 찾아주는 것은 불가능합니다. 하지만, 조금 더 예측할 수 있게끔 만들어서 문제가 되는 부분을 발견할 수 있게 도와줍니다. 이는 아래의 함수를 의도적으로 이중으로 호출하여 찾을 수 있습니다.

• 클래스 컴포넌트의 constructor, render 그리고 shouldComponentUpdate 메서드
• 클래스 컴포넌트의 getDerivedStateFromProps static 메서드
• 함수 컴포넌트 바디
• State updater 함수 (setState의 첫 번째 인자)
• useState, useMemo 그리고 useReducer에 전달되는 함수