리액트 - 컴포넌트 생명주기 (Lifecycle)

라이프사이클 (Lifecycle)

리액트 컴포넌트에는 라이프사이클(생명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링 되기 전부터 시작하여 페이지에서 사라질 때 끝이 난다.

리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링 할 때 어떤 작업을 처리해야 하거나, 컴포넌트를 업데이트하기 전/후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다.

위와 같은 상황에서 컴포넌트 라이프사이클 메서드를 사용한다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있으며, 함수형 컴포넌트에서는 사용할 수 없다. 대신 함수형 컴포넌트에는 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있다.

 

라이프사이클 메서드의 종류

라이플 사이클 메서드의 종류는 총 9가지로, Will 접두사가 붙은 메서드는 어떤 작업을 실행하기 전에 실행되는 메서드고, Did접두사가 붙은 메서드는 어떤 작업을 실행한 우에 실행되는 메서드다.

이 메서드들은 컴포넌트 클래스에서 덮어써 선언함으로써 사용할 수 있다.

라이프사이클은 총 세 가지, 즉 마운트, 업데이트, 언마운트 카테고리로 나눌 수 있다. 우선 어떤 것들이 있는지 알아보고, 큰 흐름을 이해한 후 하나씩 살펴보도록 하자.

 

컴포넌트의 라이프사이클

 

마운트

DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 한다. 이때 호출하는 메서드는 아래와 같다.

마운트 호출 메서드

업데이트

컴포넌트는 총 네 가지 경우에 업데이트한다.

• props가 바뀔 때
  부모 컴포넌트에서 넘겨주는 props가 바뀔 때 컴포넌트의 렌더링이 이루어진다.
• state가 바뀔 때
  setState 등으로 업데이트될 때 업데이트된다.
• 부모 컴포넌트가 리렌더링 될 때
  자신에게 할당된 props가 변하지 않아도, state가 바뀌지 않아도, 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 리렌더링 된다.
• this.forceUpdate로 강제로 렌더링을 트리거할 때

이렇게 컴포넌트를 업데이트할 때는 아래 메서드를 호출한다.

업데이트 호출 메서드

언마운트

마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것을 언마운트라고 한다.

 

라이프사이클 메서드 설명

render()

render() {...}

이 메서드는 컴포넌트 모양새를 정의한다. 그렇기 때문에 컴포넌트에서 가장 중요한 메서드라고 할 수 있다. 라이프사이클 메서드 중 유일한 필수 메서드이기도 하다.

이 메서드 안에서 this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환한다. 요소는 div 같은 태그가 될 수도 있고, 따로 선언한 컴포넌트가 될 수도 있다. 아무것도 보여주고 싶지 않다면 null 또는 false를 반환한다.

무엇보다 이 메서드 안에서는 이벤트 설정이 아닌 곳에서 setState를 사용하면 안 되며, 브라우저의 DOM에 접근해서도 안된다. DOM 정보를 가져오거나 state에 변화를 줄 때는 componentDidMount에서 처리해야 한다.

constructor

constructor(props) {...}

컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행된다. 이 메서드에서는 초기 state를 정할 수 있다.

getDerivedStateFromProps

getDerivedStateFromProps(nextProps, prevState) {
    if(nextProps.value !== prevState.value) {
        retrun { value: nextProps.value }
    }
    
    return null
}

리액트 16.3 버전 이후에 새로 만든 라이프사이클 메서드로, props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, 컴포넌트가 마운트 될 때와 업데이트될 때 호출된다.

componentDidMount

componentDidMount() {...}

컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행한다. 이 안에서 다른 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤드를 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리하면 된다.

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {...}

props 또는 state를 변경했을 때, 리렌더링을 시작할지 여부를 지정하는 메서드로 true/false 값을 반드시 리턴해야 한다. 컴포넌트를 만들 때 이 메서드를 따로 생성하지 않으면 기본값으로 true를 리턴하며, false를 리턴하면 업데이트 과정은 여기서 중단된다.

이 메서드 안에서 현재 props와 state는 this.props와 this.state로 접근하고, 새로 설정될 props 또는 state는 nextProps와 nextState로 접근할 수 있다.

프로젝트 성능을 최적화할 때, 상황에 맞는 알고리즘을 작성하여 리렌더링을 방지할 때는 false 값을 반환하게 한다.

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
    if(prevState.array !== this.state.array) {
        const {scrollTop, scrollHeight } = this.list
        return { scrollTop, scrollHeight };
    }
}

리액트 16.3 버전 이후 제공되는 메서드로, render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출된다. 이 메서드에서 리턴하는 값은 componentDidUpdate에서 세 번째 파라미터인 snapshot으로 전달받을 수 있는데, 주로 업데이트 하기 직전의 값을 참고할 일이 있을 때 활용된다.

componentDidUpdate

componentDidUpdate (prevProps, prevState, snapshot) { ... }

리렌더링이 완료한 후 실행한다. 업데이트가 끝난 직후이므로 DOM관련 처리를 해도 무방하다. 여기서는 prevProps 또는 prevState를 사용하여 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있다. 또 getSnapshotBeforeUpdate에서 반환한 값이 있다면, 여기서 snapshot 값을 전달받을 수 있다.

componentWillUnmount

componentWillUnmount () { ... }

컴포넌트를 DOM에서 제거할 때 실행되며, componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기서 제거 작업을 해야 한다.

componentDidCatch

componentDidCatch (error, info) {
    this.setState({
        error: true
    })
    
    console.log({error, info});
}

리액트 16 버전에서 새롭게 도입되었으며, 컴포넌트 렌더링 도중 에러가 발생했을 때 애플리케이션이 먹동이 되지 않고 오류 UI를 보여줄 수 있게 해준다.

error는 파라미터는 어떤 에러가 발생했는지 알려주며, info 파라미터는 어디에 있는 코드에서 오류가 발생했는지에 대한 정보를 준다. 이 메서드를 사용할 때는 컴포넌트 자신에게 발생하는 에러를 잡아낼 수 없고 자신의 this.props.children으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있다.

 

 

마무리

라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드이다. 이 메서드들은 서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용하며, 컴포넌트 업데이트 성능을 개선할 때는 shouldComponentUpdate가 중요하게 사용된다.