[React] 생명 주기 / 라이프 사이클 (Life Cycle)

Life Cycle

리액트 컴포넌트에는 라이프 사이클(생명 주기)이 존재한다.

라이프 사이클이란 컴포넌트가 생성되고, 사용되고, 소멸되는 일련의 과정을 뜻하고,

생명 주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데, 이를 라이프 사이클 이벤트라고 한다.

 

출처 : http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

---

분류

1. Mount (마운트)

컴포넌트가 처음 실행이 될 때, 그것을 Mount 라고 표현을 한다.

DOM이 생성되고 웹 브라우저 상에 나타나는 것을 말한다.

 

마운트에 해당되는 생명주기에는 다음과 같은 메서드들이 있다.

 

1) constructor 

 

컴포넌트 생성자 메서드로,  컴포넌트가 만들어지면 제일 먼저 실행이 되는 메서드 이다.

state와 props 를 접근하여 값을 할당할 수 있다.

constructor(props) {
  super(props);
  this.state = { counter: 0 };
  // this.setState() 호출은 X
}

 

 

2) getDerivedStateFromProps

 

getDerivedStateFromProps 는 props 로 받아온 것을 state에 설정하고 싶을 때 사용이 되며,

컴포넌트가 마운트(Mount), 갱신(Update) 될 때 호출되며, render 메서드를 호출하기 직전에 호출된다.

static getDerivedStateFromProps(nextProps, prevState) {
  // 조건에 따라 특정 값 동기화
    if(nextProps.value !== prevState.value) {
     return { value: nextProps.value };
    }
    return null;  // state 변경할 필요 없을 경우 null 반환
}

 

다른 생명주기 메서드와는 달리 앞에 static 을 필요로 하고, 이 안에서는 this 를 조회할 수 없다.

여기서 특정 객체를 반환하게 되면 해당 객체 안에 있는 내용들이 컴포넌트의 state로 갱신이 되며,

null을 반환하게 되면 아무 것도 갱신하지 않을 수 있다.

 

이 메서드는 참고로 컴포넌트가 처음 렌더링 되기 전에도 호출 되고, 그 이후 리렌더링 되기 전에도 매번 실행된다.

 

 

3) render

 

render() 는 컴포넌트를 렌더링 해주는 메서드이다.

클래스 컴포넌트에서 반드시 구현되어야 하는 유일한 메서드(필수 메서드)이다.

render()

 

render 함수 안에서는 이벤트 설정이 아닌 곳에서 setState를 사용하지 않고, 브라우저의 DOM에 접근해서도 안된다.

DOM 정보를 가져오거나 state 변화를 줄 때는 이후에 실행되는 componentDidMount 에서 처리한다.

 

 

4) componentDidMount

 

컴포넌트의 첫 번째 렌더링이 마치고 나면 호출되는 메서드이다.

 

이 메서드가 호출되는 시점에는 우리가 만든 컴포넌트가 화면에 나타난 상태이다.

 

componentDidMount 에서는 DOM에 접근하여 사용을 할 수가 있다.

그래서 여기서는 주로 D3, masonry 처럼 DOM 을 사용해야하는 외부 라이브러리 연동을 하거나,

해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios, fetch 등을 통하여 AJAX 요청을 하거나, DOM 의 속성을 읽거나 직접 변경하는 작업을 진행한다. (setTimeout, setInterval 등)

---

2.  Update (업데이트)

컴포넌트 업데이트 시에는 다음과 같은 메서드들이 호출이 된다.

 

1) getDerivedStateFromProps

getDerivedStateFromtProps 는 컴포넌트의 props 나 state 가 바뀌었을 때도 이 메서드가 호출된다.

 

 

2) shouldComponentUpdate

shouldComponentUpdate 메서드는 컴포넌트가 리렌더링 여부를 결정하는 메서드이다.

 shouldComponentUpdate(nextProps, nextState)

 

주로 최적화할 때 사용하는 메서드이다.

 

 

3) render

컴포넌트를 렌더링 하는 메서드이다.

 

 

4) getSnapshotBeforeUpdate

컴포넌트에 변화를 DOM에 반영하기 직전에 호출하는 메서드로, 변경되기 이전 값을 사용할 수 있다.

반환 값은 componentDidUpdate 에서 세 번째 파라미터인 snapshot 값으로 전달 받는다.
주로 업데이트하기 직전의 값을 참고할 일이 있을 때 활용한다. 

 getSnapshotBeforeUpdate(prevProps, prevState)

 

 

5) componentDidUpdate

컴포넌트의 업데이트 작업이 끝난 뒤에 호출되는 메서드이다. 이 단계에서는 render가 완료되었으므로 DOM에 접근할 수 있다.

이 메서드는 최초 렌더링에서는 호출되지 않는다.

componentDidUpdate(prevProps, prevState) {}

componentDidUpdate(prevProps) {
  // 전형적인 사용 사례 (props 비교를 잊지 마세요)
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

 

---

3. Unmount (언마운트)

언마운트는 컴포넌트가 화면에서 제거되는 것을 의미한다.

관련된 생명주기 메서드는 componentWillUnmount 하나가 있다.

 

1) componentWillUnmount

 

컴포넌트가 화면에서 사라지기 직전에 호출된다.

  componentWillUnmount()

 

여기서는 주로 DOM에 직접 등록했었던 이벤트를 제거하는 등의 작업을 한다.

 

만약에 setTimeout 을 걸은것이 있다면 clearTimeout 을 통하여 제거를 하며,

추가적으로 외부 라이브러리를 사용한게 있고 해당 라이브러리에 dispose 기능이 있다면 여기서 호출해주면 된다.

 

 

 

---

참조

https://shape-coding.tistory.com/entry/React-React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%83%9D%EB%AA%85-%EC%A3%BC%EA%B8%B0-Life-Cycle

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

https://jjongbin.tistory.com/54

https://velog.io/@youngminss/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0-%EB%A9%94%EC%84%9C%EB%93%9C