리액트 생명주기 React - lifecycle 정리

1. Mounting - 화면을 그린다.

constructor - React Component 를 생성한다.
: 지역 state를 초기화, 이벤트 처리 메서드 바인딩 
※ this.state나 this.setState()를 사용해야하며, props를 복사하면 안됩니다.( super(props)--X )

getDerivedStateFromProps - props 로 받아온 것을 state 에 넣어주고 싶을 때 사용.

render - 컴포넌트를 렌더링합니다. virtualDOM에 해당 컴포넌트를 생성.
※ 실제 DOM노트에 표시를 하는 메소드는 ReactDOM.render 메소드를 통해 표시하게 됩니다.

componentDidMount - render로 만들어진 virtualDOM을 실제 돔에 반영한 직후 호출.
(= 렌더링 직후)
: 컴포넌트에 필요한 데이터를 가져오거나 DOM 속성을 읽거나 변경하는 작업을 진행
: hooks에서는 useEffect를 이용하여 componentDidMount의 역활을 수행.

useEffect(() => {
    console.log("component did mount with useEffect!");
  });

2. Updating - 화면을 변경한다.

getDerivedStateFromProps - props 로 받아온 것을 state 에 넣어주고 싶을 때 사용.

render - 컴포넌트를 렌더링합니다. virtualDOM에 해당 컴포넌트를 생성.
※ 실제 DOM노트에 표시를 하는 메소드는 ReactDOM.render 메소드를 통해 표시하게 됩니다.

shouldComponentUpdate - 컴포넌트를 리렌더링 할지 말지를 결정.
※ 리렌더링이 일어나도 실제 화면이 계속 새로 그려지는것이 아니고 virtualDOM과 비교해서 실제 바뀐게 있어야 실제 화면에 반영.

getSnapshotBeforeUpdate - 변화가 일어나기(Update) 전에 호출.
※ DOM상태나 특정 값을 반환하면 componentDidUpdate에서 받아서 사용할 수 있습니다. 

componentDidUpdate - 리렌더링이 마치고, 화면에 변화를 모두 반영한 뒤 호출. (= 리렌더링 직후)
: DOM 속성을 읽거나 변경하는 작업을 진행
: hooks에서는 useEffect를 이용하여 componentDidUpdate의 역활을 수행.

useEffect(() => {
    console.log("component did mount with useEffect!");
  }, 
  //componentDidUpdate [state]값에 변화가 있으면 리렌더링 
  [state]
  );

3. Unmount - 화면에서 지운다.

componentWillUnmount - 컴포넌트가 화면에서 사라지기 직전에 호출.
: 컴포넌트가 Unmount 되기 전에 사라지는 컴포넌트에 대한 정리 작업을 수행.
: hooks에서는 useEffect를 이용하여 mponentWillUnmount 의 역활을 수행.

useEffect(() => {
    console.log("component did mount with useEffect!");

    return( // componentWillUnmont
        // 지워지기 전에 정리할 작업
    )
  }, []);

참고.

공식문서 리액트 라이프사이클