Lifecycle Methods(생명주기 메서드)

https://react.vlpt.us/basic/25-lifecycle.html

25. LifeCycle Method · GitBook

componentDidMount
componentDidUpdate 
componentWillUnMount 

 

componentDidMount

컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드입니다. 이 메서드가 호출되는 시점에는 우리가 만든 컴포넌트가 화면에 나타난 상태입니다. 여기선 주로 D3, masonry 처럼 DOM 을 사용해야하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios, fetch 등을 통하여 ajax 요청을 하거나, DOM 의 속성을 읽거나 직접 변경하는 작업을 진행합니다.

• componentDidMount 메서드는 컴포넌트가 마운트(렌더링 후 DOM에 삽입)된 직후에 호출
• 초기 데이터 로딩, 외부 API 호출, 타이머 설정 등 컴포넌트가 처음으로 렌더링된 후에 해야하는 작업들을 주로 수행
• 마운트된 컴포넌트에서 DOM 접근이 가능하며, 초기화 작업에 이용

 

 

componentDidUpdate

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

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

• componentDidUpdate 메서드는 컴포넌트의 업데이트가 발생한 직후에 호출
• 컴포넌트가 업데이트되면서 상태(state)가 변경되거나 props가 변경되면 실행
• prevProps와 prevState를 통해 이전 프롭스와 상태에 접근할 수 있음
• 주로 컴포넌트 업데이트에 따른 추가적인 작업이나 상태에 따른 조건부 로직을 처리할 때 사용

https://codesandbox.io/s/getsnapshotbeforeupdate-yeje-vpmle?fontsize=14&file=/src/index.js 

getSnapshotBeforeUpdate 예제 - CodeSandbox

componentDidUpdate  예제

 

 

 

 

componentWillUnmount

componentWillUnmount 는 컴포넌트가 화면에서 사라지기 직전에 호출됩니다.

언마운트라는것은, 컴포넌트가 화면에서 사라지는것을 의미합니다. 언마운트에 관련된 생명주기 메서드는 componentWillUnmount 하나입니다.

  componentWillUnmount() {
    console.log("componentWillUnmount");
  }

여기서는 주로 DOM에 직접 등록했었던 이벤트를 제거하고, 만약에 setTimeout 을 걸은것이 있다면 clearTimeout 을 통하여 제거를 합니다. 추가적으로, 외부 라이브러리를 사용한게 있고 해당 라이브러리에 dispose 기능이 있다면 여기서 호출해주시면 됩니다.

• componentWillUnmount 메서드는 컴포넌트가 언마운트(컴포넌트가 DOM에서 제거)되기 직전에 호출
• 주로 컴포넌트의 정리(clean-up) 작업이 이루어지며, 이벤트 리스너 해제, 타이머 제거, 리소스 반환 등을 수행
• 메모리 누수를 방지하고 리소스를 해제하는 등의 정리 작업을 수행하는데 사용