[코드잇 스프린트 풀스택 4기] 리액트 생명 주기(Life Cycle)란

1. 함수형 컴포넌트 라이프 사이클
   1.  

1. 리액트의 컴포넌트는 생명 주기(이하 라이프 사이클)를 가진다. 라이프 사이클이란 컴포넌트가 생성되고 사용되고 소멸되기까지의 일련의 과정을 말하며 이 라이프 사이클 동안 특정 시점에서 자동으로 호출되는 이벤트가 있는데 이를 라이프 사이클 이벤트라고 한다.
2. 리액트는 이 라이프 사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 작업 수행을 향상시키는 사용자 정의 로직을 구현할 수 있다. 예를 들면 재렌더링 여부를 정할 수 있는 이벤트를 통해 불필요한 렌더링을 방지할 수 있으며 이외에도 원하는 시점에 서버에서 데이터를 가져오거나 DOM이벤트 또는 다른 프론트엔드 라이브러리와 통합할 때 사용할 수 있다.
3. 3가지 이벤트 분류
   1. Mounting
      1. 리액트 엘리먼트(컴포넌트 클래스의 인스턴스)를 DOM노드에 추가할 때 발생하며, 한 번만 실행된다.
      2. 가장 먼저 state, defaultProps, context를 저장한다. 그 후 componentWillMount()메소드를 호출한다. render()로 컴포넌트가 DOM에 마운트되면 componentDidMount()메소드를 호출한다.
         1. componentWillMount(): 마운팅 전이기 때문에 props나 state에 접근은 가능하나 변경할 수는 없다. render실행전이므로 DOM에 접근할 수 없다.
         2. componentDidMount(): DOM에 삽입되어 렌더링이 완료된 후 호출된다. DOM에 접근할 수 있다. 주로 이 단계에서 AJAX호출을 하거나 setTimeout, setInterval같은 행동을 한다.
      3. state, props, context 저장 → componentWillMount → render → componentDidMount
   2. Updating
      1. props나 state가 변경되어 리액트 엘리먼트가 업데이트될 때 발생하며 여러 번 실행된다.
      2. componentWilReceiveProps(nextProps)
         1. 컴포넌트가 props를 받기 직전에 실행
         2. 변경될 props를 매개변수로 받는다.
         3. state update 과정에서는 호출되지 않음
      3. shouldComponentUpdate(nextProps, nextState)
         1. props나 state를 변경했을 때 리렌더링을 할지 말지 결정하는 메서드
         2. 반드시 true나 false를 반환
         3. false를 반환하면 렌더링하지 않음
         4. 오직 성능 최적화만을 위한 메서드
      4. componentWillUpdate(nextProps, nextState)
      5. (render)
      6. componentDidUpdate(prevProps, prevState)
   3. Unmounting
      1. componentWillUnmount