React - Lifecycle

Lifecycle & 조건부 렌더링

Cannot read property '0' of undefined 프로젝트를 하면서 자주 볼 수 있는 에러 중에 하나이다. 이 에러는 Lifecycle과 관련이 있다!

⬇️ 아래 사진은 React Lifecycle Methods diagram 이다

👉🏻 Lifecycle 순서

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

👉🏻 부모 - 자식 Lifecycle 순서

위 처럼 에러가 발생할 때는 “조건부 렌더링” 을 통해 해결할 수 있다.

✨ AND 연산자 (&&)를 사용한 조건부 렌더링

이렇게 사용함으로써 Lifecycle과 관련된 에러 문제를 조건부 렌더링을 통해 해결할 수 있다 ❗️

• react