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

처음 리액트쓰면서 props로 데이터를 전달할 때, undefined 에러가 자꾸 떠서 왜인가 했는데..
라이프사이클에 모든 답이 있었다. 리액트의 마음이 되어, 작업을 수행해보니 데이터가 없는데, key에 접근하라고 했을때 그가 느꼈을 당혹감을 이해할 수 있었다.😔 (컴퓨터는 거짓말을 하지 않습니다.)

1. Lifecycle 기본 순서

1. constructor
2. render // 화면 그리기
3. componentDidMount // 보통은 data fetch, 처음 단 한번만 호출된다.
4. (fetch 완료) //data setState
5. render
6. (setState)
7. componentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)
8. componentWillUnmount

2. 조건부 렌더링을 통한 undefined error 해결방법

✅ &&연산자 사용 or '?'

<div>
  {this.state.date[0] && this.state.data[0].name} // 데이터가 있을 때만 name 에 접근 
</div>

//OR 

<div>
  {this.state.date?.name} // 앞의 경로를 다 적어주지 않아도 되지만,inx값에는 바로 접근 불가. 
</div>

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