React - LifeCycle 간단히 알아보기

크게 3가지 단계로는 Mount -> Update -> Unmount 로 나눠진다.

1. Mounting - 화면을 그린다.

constructor - React Component 를 생성한다.

: 지역 state를 초기화, 이벤트 처리 메서드 바인딩 

※ this.state나 this.setState()를 사용해야하며, props를 복사하면 안됩니다.( super(props)--X )

 

(New) 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과 비교해서 실제 바뀐게 있어야 실제 화면에 반영.

 

(New) 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를 이용하여 componentWillUnmount의 역활을 수행.

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

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