React Life Cycle Methods

참고링크: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Lifecycle 기본 순서

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

- 사용자의 액션(클릭 등)에 의해서 setState()하지 않고, 생명주기 method인 componentDidUpdate()를 통해 setState()하는 이유는 보통, 그 안에서 현재 state안에는 없는 새로운 데이터를 fetch를 통해 전달 받은 다음 setState()해야하기 때문

(주의) - lifeCycle 순서 때문에, componentDidMount 함수 보다 render먼저 실행되어 map 실행 오류 등이 발생하는 경우가 있음

=> 조건부 연산자로 해결가능('&&', 삼항연산자 등) 어차피 두번은 렌더되므로, 두번째에 받은 state 데이터로 map을 실행되도록 하면 됨
=> 굉장히 자주보는 오류임
=> 예를들어, 모달창 띄울 때, 클릭 등의 이벤트와 연결된 (boolean)변수를 활용하여, 변수값을 활용한 조건부 랜더를 통해 모달창 끄고 닫히도록 할 수 있음

🚨 주의 : React.StrictMode에 의해 특정 라이프사이클 메서드가 2번 불릴 수 있음 (문제 X, 정상 O)
=> 이중으로 호출해서 문제점을 발견하기 쉽게 도와줌
: Strict 모드가 자동으로 부작용을 찾아주는 것은 불가능하지만, 조금 더 예측할 수 있게끔 만들어서 문제가 되는 부분을 발견할 수 있게 도와줍니다. 이는 아래의 함수를 의도적으로 이중으로 호출하여 찾을 수 있습니다.

• 클래스 컴포넌트의 constructor, render 그리고 shouldComponentUpdate 메서드
• 클래스 컴포넌트의 getDerivedStateFromProps static 메서드
• 함수 컴포넌트 바디
• State updater 함수 (setState의 첫 번째 인자)
• useState, useMemo 그리고 useReducer에 전달되는 함수
  https://ko.reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects