[React] 리액트 컴포넌트의 생명주기(Life Cycle)

 

 

React.js의 핵심 개념 중 하나는 컴포넌트의 생명주기(Life Cycle)이다.

컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고, 업데이트 되고, 마지막으로 사라질 때까지의 과정을 말한다.

 

이 생명주기는 여러 단계로 나뉘며, 각 단계마다 개발자는 특정 코드를 실행할 수 있는 메서드를 이용할 수 있다.

(생명주기 메소드는 Class형 컴포넌트에서만 사용할 수 있다)

 

 

 

 

먼저 마운드될 때 발생하는 생명주기는 아래와 같다

• constructor : 생성자 메서드. 컴포넌트 생성시 가장 먼저 실행되는 메서드
• getDerivedStateFromProps : props 로 받아온 것을 state 에 넣어주고 싶을 때 사용한다.
• render : 컴포넌트를 표시하는 메서드
• componentDidMount : 컴포넌트 렌더링을 마치고 나면 호출되는 메서드

 

componentDidMount (생성)

componentDidMount 는 컴포넌트가 마운트 된 다음 실행되는 메서드이다.

Tree에 삽입된 직후 즉, 컴포넌트가 화면에 나타난 후에 호출이 된다. DOM 노드가 있어야하는 초기화 작업은 이 메소드를 통해 이루어진다.

보통 componentDidMount 에서 axios, fetch 등을 통하여 데이터를 요청하여 setState 를 호출하는 경우가 있다. 이때 React DOM이 업데이트 되었기 때문에 render 가 다시 호출되서 총 2번의 렌더링이 이루어지므로 성능이슈가 되지 않도록 주의 해야한다!

 

 

componentDidUpdate (업데이트)

컴포넌트가 업데이트 되는 시점에는 생성때와 마찬가지로 getDerivedStateFromProps 와 render 가 호출된다.

componentDidUpdate는 리렌더링을 마치고 화면에 변화가 모두 반영되고 난 뒤 호출되는 메소드이다. 3번째 파라미터로 getSnapshotBeforeUpdate 에서 반환한 값을 조회할 수 있다.

componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("componentDidUpdate", prevProps, prevState);
        if(sanpshot){
                console.log("업데이트 되기 직전 색상", snapshot)
        }
}

getSnapshotBeforeUpdate 는 함수형 컴포넌트+Hooks를 사용할 때 대체할 수 있는 기능은 아직 없다. DOM의 변화에 반영직전에 DOM 속성을 확인할 땐 위의 방법을 활용할 수 있는 정도만 알아두자!

 

 

componentWillUnmount (제거)

컴포넌트가 화면에서 사라지기 직전에 호출되는 unmount 메소드이다.

여기서는 주로 DOM에 직접 등록했던 이벤트를 제거하고, 만약 setTimeout 을 걸은것이 있다면 clearTimeout 을 통하여 제거한다.

추가적으로 외부 라이브러리를 사용한게 있다면 dispose 기능을 이 단계에서 호출하면 된다.

 

 

 

 

[출처]

• 라이프 사이클 이미지 참고
• 벨로퍼트와 함께하는 모던 리액트 - LifeCycleMethod