[React] Lifecycle

✅Lifecycle 기본 순서

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

🔻위 순서로 인해 발생할 수 있는 대표적인 에러들🔻

⏩ 1. render 함수 안에 this.state.data[0].name

render함수 안에 state의 특정 key값을 불러오고, 뎁스를 한 단계 더 추가하려고 하면 아래와 같은 에러가 발생한다.
Cannot read property 'name' of undefined

에러가 발생하는 이유를 Lifecycle 순서대로 살펴보면,

1. constructor
2. render
   💥this.state.data[0].name)💥 >>> 에러 발생
3. componentDidMount
4. (fetch 완료)
5. render
6. (setState)
7. componentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)

• 처음 render 함수가 실행될 때는 componentDidMount 이전, 즉 setState되기 전이기 때문에 this.state.data가 빈 배열로 찍힐 수 밖에 없다.
• 반대로 componentDidMount 이후, 즉 setState 이후의 render 함수에서는 this.state.data가 데이터에서 받은 배열을 잘 반영하여 나온다.
• 빈 배열의 0번째 index, 즉 this.state.data[0] 은 undefined이기 때문에 name이라는 key값을 가질 수 없어 위와 같은 에러가 발생한 것이다.

📛 해결방법: AND 연산자(&&)를 사용한 조건부 렌더링

• 특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아무것도 렌더링하지 않아야 하는 상황에서는 조건부 연산자를 통해 구현할 수 있다.
  {this.state.data[0]} && this.state.data[0].name}
• "this.state.data[0] 이 true 인 경우에만 this.state.data[0].name을 렌더하겠다" 라는 뜻
• 이렇게 데이터를 받아서 무조건 렌더링 하는 것이 아니라, 조건을 걸어서 내가 원하는 데이터가 있는 경우에만 렌더링을 시켜주는 방법으로 에러를 해결할 수 있다.