TIL36.컴포넌트의 Life Cycle

리액트 component가 생성(mounting)되고, 수정(updating)되고, 소멸(unmounting)되는 과정들에 대해 알아보자.

Life Cycle이란

Life Cycle이란 컴포넌트가 생성되어 소멸될 때까지의 일련의 과정들을 일컫는다. 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. 라이프사이클은 마운트, 업데이트, 언마운트카테고리로 나뉜다.

Mounting

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

constructor(props)

컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드이다.

• 메소드를 바인딩하거나 초기 state를 정할 수 있다.
• this.state를 직접 할당할 수 있는 유일한 곳이기 때문에, 그 외의 메서드에서는 setState를 사용해야한다. 만약 이러한 작업이 없다면, 해당 컴포넌트에는 constructor를 구현하지 않아도 된다.

render()

준비한 UI를 렌더링하는 메서드이다.

• 유일하게 클래스형 컴포넌트에서 반드시 사용해야하는 메소드이다.
• 이 메서드 안에서 this.props와 this.state에 접근할 수 있으며, 리액트 요소(태그나 다른 컴포넌트)를 반환한다.
• 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과를 반환해야 하며, 브라우저의 DOM에 직접적으로 상호작용할 수 없다.
• 브라우저와 상호작용하는 작업이 필요하다면, componentDidMount에서 처리해야한다.

componentDidMount()

이 메서드는 첫 렌더링을 다 마치고 컴포넌트가 마운트될 직후, 즉 컴포넌트가 브라우저상에 나타난 후 호출된다.

• 주로 다른 Js라이브러리, 프레임워크 함수 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청같은 비동기 작업을 실행할 때 사용한다.
• 만약 componentDidMount에서 데이터를 불러온 후에 setState를 실행하면 render가 다시 호출된다.

//componentDidMount 메서드를 이용하여 네트워크 데이터 요청하기
componentDidMount() {
    fetch("http://localhost:3000/data/data.json", {
      method: "GET",
    })
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          commentList: res.data,
          storyList: res.storyInfo,
        });
      });
  }

Updating

state나 props가 바뀌었을 때, 부모 컴포넌트가 리렌더링될 때, this.forceUpdate로 강제로 렌더링을 트리거할 때를 말한다.

shouldComponentUpdate(nextProps, nextState)

props 또는 state를 변경했을 때, 리렌더링을 시작할지 여부를 지정하는 메서드이다.

• 이 메서드를 따로 생성하지 않으면 기본적으로 true값을 반환한다. 따로 작성을 해주어서 조건에 따라 false를 반환하면 해당 조건에는 render 함수를 호출하지않고, 업데이트 과정은 중지된다.
• 성능최적화를 위해서 리렌더링을 방지할 때는 shouldComponentUpdate를 사용한다.

componentDidUpdate(prevProps, prevState, snapshot)

리렌더링을 완료한 후 실행한다. 쉽게 말해 이전 상태를 알 수 있게 해주는 메소드이다.

• 인자를 통해 이전의 값인 preProps, prevState를 조회할 수 있다.
• getSnapshotBeforeUpdate에서 반환한 snapshot 값은 세번째 값으로 받아온다.
• componentDidUpdate는 갱신이 일어난 직후에 호출되며, 최초 렌더링에서는 호출되지 않는다.
• 컴포넌트가 갱신되었을 때 DOM을 조작하거나, 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업을 할 때 사용하면 좋다. setState를 즉시 호출할 수도 있지만 조건문을 주지 않으면 무한반복이 발생할 수 있기때문에 주의해야한다. 또한 추가적인 렌더링을 유발하여, 컴포넌트 성능에 영향을 미칠 수 있다.

componentDidUpdate(prevProps) {
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

Unmounting

마운트의 반대과정, 즉 컴포넌트가 브라우저상에서 사라질 때를 말한다.

componentWillUnmount()

컴포넌트가 브라우저상에서 사라지기 전에 호출하는 메서드이다.

• 이 메서드 내에서 타이머 제거, 네트워크 요청 취소,이벤트 리스너 제거 등의 정리 작업들을 수행할 수 있다.
• 이 메서드를 끝으로 컴포넌트는 다시 렌더링되지않기때문에 componentWillUnmount내에서 setState를 호출하면 안된다.