🥏 공식문서로 배우는 React

Sohyeon Bak·2022년 8월 23일

React

목록 보기

8/9

05. Lifecycle

리액트에서 컴포넌트가 실행 될 때 컴포넌트에는 생성, 업데이트, 제거 동작의 생명주기를 가지게 된다.
생명주기(lifecycle) 메소드는 클래스형 컴포넌트에서 사용되며, 함수형 컴포넌트에서는 Hook을 사용한다.
생명주기 메소드와 Hook은 비슷하게 사용되지만 커버하지 않는 기능도 있고, 작동방식도 다르다.

React에서 랜더링이 실행되는 과정

Props

State

forceUpdate()

부모 컴포넌트의 랜더링

컴포넌트가 변경되는 여러 요인들과 상속하는 자식 컴포넌트 등 여러 이유로 불필요한 랜더링이 일어날 수 있는데, 불필요한 랜더링은 성능에 문제를 발생시킨다.

The Component Lifecycle

모든 컴포넌트는 여러 종류의 생명주기 메소드를 가지고 이 메소드들은 특정 시점에 실행하도록 설정해 줄 수 있다.

mount

constructor()
: 컴포넌트의 생성자 메소드, 컴포넌트가 생성되면 가장 먼저 실행되는 메소드

constructor(props)

static getDerivedStateFromProps()
: props로 받아온 데이터를 state에 넣어주고 싶을 때 사용한다.
다른 메소드와 달리 static이 필요하고, this를 조회할 수 없다.
이 메소드에서 특정 객체를 반환하게 되면 해당 객체의 내용들이 state로 설정되고, null을 반환하게 되면 아무 일도 발생하지 않는다.
컴포넌트가 처음 랜더링 되기 전과 리랜더링 되기 전에 매번 실행된다.

static getDerivedStateFromProps(props, state)

render()
: 컴포넌트를 랜더링하는 메소드

render()

componentDidMount()
: 컴포넌트의 첫번째 랜더링이 끝나면 호출되는 메소드이다.
이 메소드가 호출 되었다는 것은 DOM이 화면에 다 그려진 상태이며, DOM을 연동해야하는 라이브러리나 데이터 요청(axios, fetch 등), DOM 속성을 읽거나 변경해야하는 작업을 할 수 있다.

componentDidMount()

update

props나 state가 변경되면 갱신한다.

static getDerivedStateFromProps()
: 컴포넌트의 props나 state가 변경되었을 때 호출된다.

static getDerivedStateFromProps(props, state)

shouldComponentUpdate()
: 컴포넌트가 리랜더링을 할지 결정하는 메소드이다.
주로 최적화에 사용되며 React.memo와 역할이 비슷하다.
forceUpdate()는 shouldComponentUpdate를 무시하고 랜더링 강행한다.

shouldComponentUpdate(nextProps, nextState)

render()
getSnapshotBeforeUpdate()
: 컴포넌트에 변화가 일어나기 직전 DOM 상태를 가져와 특정 값을 반환하면 그다음 발생하게 되는 componenetDidUpdate() 함수에서 받아와 사용할 수 있다.

getSnapshotBeforeUpdate(prevProps, prevState)

componentDidUpdate()
: 리랜더링이 마치고 화면에 원하는 변화가 반영된 후 호출되는 메소드이다.
세번째 파라미터로 getSnapshotBeforeUpdate에서 반환한 값을 사용할 수 있다.

componentDidUpdate(prevProps, prevState, snapshot)

unmount

컴포넌트가 DOM 상에서 제거될 때 호출된다.

componentWillUnmount()
: 컴포넌트가 화면에서 사라지기 직전에 호출된다.
여기서는 주로 DOM에 직접 등롱했던 이벤트를 제거하고 setTimeout 같은 함수를 사용했다면 clearTimeout을 사용해 제거해주는 역할을 한다.

componentWillUnmount()

Other APIs

위의 생명주기 메서드와 달리 아래의 메서드들은 사용자가 직접 컴포넌트 내에서 호출 할 수 있다.

setState()

setState()는 컴포넌트를 갱신하는데 즉각적 명령이 아닌 요청이다.
리액트는 state의 변화를 즉시 적용하는 것을 보장하지 않는다.
여러 변경사항과 함꼐 일괄적으로 갱신하거나 나중으로 미룰 수 있다.
componentDidUpdate 또는 setState의 콜백을 사용해 바로 값을 변경할 수 있다.
shouldComponentUpdate()가 false를 반환하지 않는다면 setState()는 항상 랜더링을 발생시킨다.

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

updater 함수로 전달된 state와 props는 최신값이 보장되고 state에 얕게 병합된다.

forceUpdate()

컴포넌트의 state 또는 props가 변경되면 컴포넌트가 리랜더링 되는 것이 기본 동작이다.
forceUpdate()를 호출하면 render()가 호출되는데 shouldComponentUpdate()는 무시한다.
보통 render() 내에서는 forceUpdate()를 사용하지 말아야 하며, 오직 this.props와 this.state의 값만을 사용해야 한다.