Life Cycle

🐣 혼자 공부하는 용도로 블로그를 보면서 작성한 거라 내용이 상당상당히 비슷합니다. 혹시나 보게 될 사람이 있으시다면 참고 바랍니다!

Life Cycle in React

컴포넌트 초기 생성

컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API

1. constructor

constructor(props) {
  super(props);

컴포넌트 생성자 함수, 컴포넌트가 새로 만들어질 때마다 호출되는 함수이다.

2. componentWillMount

componentWillMoumt() {
  
}

이 API 는 컴포넌트가 화면에 나가기 직전에 호출되는 API,주로 브라우저가 아닌 환경에서도 (서버사이드) 호출하는 용도로 사용했었는데, v16.3 에서는 해당 API 가 deprecated 되었다. 그냥 있었구나~ v16.3 이후부터는 UNSAFE_componentWillMount() 라는 이름으로 사용된다.

3. componentDidMount

componentDidMount() {
  // 외부 라이브러리 연동: D3, masonry, etc...
  // 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc...
  // DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등...
}

이 API 는 컴포넌트가 화면에 나타나게 됐을 때 호출된다. 주로 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해서 axios, fetch 등을 통하여 ajax 요청을 하거나, DOM 의 속성을 읽거나 직접 변경하는 작업을 한다.

컴포넌트 업데이트

컴포넌트 업데이트는 props 변화, state 의 변화에 따라 결정된다. 업데이트가 되기 전과 된 후에 호출되는 API

1. componentWillReceiveProps

componentWillReceiveProps(nextProps) {
  // this.props 는 아직 바뀌지 않은 상태
}

이 API 는 컴포넌트가 새로운 props 를 받게됐을 때 호출된다. 주로 state 가 props 에 따라 변해야 하는 로직을 작성한다. 새로 받게 될 props 는 nextProps 로 조회할 수 있으며, this.props 는 업데이트 되기 전의 props, v16.3부터 deprecate 되어, UNSAFE_componentWillReceiveProps() 로 사용도된다.

2. [NEW] static getDerivedStateFromProps()

static getDerivedStateFromProps(nextProps, prevState) {
  // 여기서는 setState 를 하는 것이 아니라
  // 특정 props 가 바뀔 때 설정하고, 설정하고 싶은 state 값을 리턴하는 형태로 사용
  
  /*
  if (nextProps.value !== prevState.value) {
    return { value: nextProps.value };
  }
  return null; // null 을 리턴하면 따로 업데이트 할 것은 없다라는 의미
  /*
}

v16.3 이후에 만들어진 라이프사이클 API이다. props로 받아온 값을 state로 동기화하는 작업을 해줘야 하는 경우에 사용된다.

3. shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
  // return false 하면 업데이트 안 함
  // return this.props.checked !== nextProps.checked
  return true;
}

이 API 는 컴포넌트를 최적화하는 작업에서 매우 유용하게 사용된다!!! 리액트에서는 변화가 발생하는 부분만 업데이트를 해줘서 성능이 꽤 잘 나오는데 변화가 발생한 부분만 감지해 내기 위해서는 Virtual DOM 에 한 번 그려줘야 한다.

즉, 현재 컴포넌트의 상태가 업데이트되지 않아도, 부모 컴포넌트가 리렌더링되면, 자식 컴포넌트들도 렌더링 된다.

쓸데없이 낭비되고 있는 CPU 처리량을 줄여주기 위해서 shouldComponentUpdate 를 사용한다.

이 함수는 기본적으로 true 를 반환한다. 조건에 따라 false 를 리턴해서 해당 조건에는 render 함수를 호출하지 않아 화면을 리렌더링하는 낭비를 줄여 CPU 처리량을 줄일 수 있다..

4. componentWillUpdate

componentWillUpdate(nextProps, nextState) {
  // 애니매이션 효과를 초기화하거나
  // 이벤트 리스너를 없애는 작업을 한다.
}

이 API 는 shouldComponentUpdate 에서 true를 반환했을 때만 호출된다. v16.3 이후 deprecate 되어서 기존의 기능은 getSnapshotBeforeUpdate 로 대체될 수 있다.

5. [NEW] getSnapshotBeforeUpdate()

이 API 가 발생하는 시점은

이 API 를 통해서, DOM 변화가 일어나기 직전의 DOM 상태를 가져오고, 여기서 리턴하는 값은 componentDidUpdate 에서 3번째 파라미터로 받아올 수 있다.

getSnapshotBeforeUpdate(prevProps, prevState) {
  // DOM 업데이트가 일어나기 직전의 시점이다.
  
  // 여기서 return 하는 값은 componentDidMount 에서 snapshot 값으로 받아올 수 있다.
  return ;
}

6. componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot) {
  
}

이 API 는 컴포넌트에서 render() 를 호출하고 난 다음에 호출된다. 이 시점에서는 this.props 와 this.state 가 바뀌어있다. 그리고 prevProps, prevState 를 조회할 수 있다. 그리고 getSnapshotBeforeUpdate 에서 반환한 snapshot 값을 받아온다.

컴포넌트 제거

컴포넌트가 더 이상 필요하지 않게 되면 단 하나의 API가 호출된다.

1. componentWillUnmount

componentWillUnmount() {
  // 이벤트, setTimeout, 외부 라이브러리 인스턴스 제거
}

이 API 에서는, 주로 등록했었던 이벤트를 제거하고, 만약 setTimeout 을 걸었다면 clearTimeout 을 통하여 제거를 한다.

추가적으로, 외부 라이브러리를 사용했거나 해당 라이브러리에 dispose 기능이 있다면 여기서 호출하면 된다.

컴포넌트에 에러 발생

render 함수에서 에러가 발생한다면, 리액트 엡이 크래쉬 되어버린다(===앱이 예기치 않은 오류 또는 예외로 동작을 멈추고 작동하지 않는 상태가 된다)

일반적으로 렌더링 부분에서 오류가 발생하는 것은 사전에 방지해야한다. 주로 에러가 발생하는 이유는

1. 존재하지 않는 함수를 호출하려고 할 때(ex/ props로 받았을 줄 알았던 함수가 전달되지 않았을 때)

this.props.onClick();

2. 배열이나 객체가 올 줄 알았는데, 존재하지 않을 때

this.props.object.value; // object is undefined
this.props.array.length; // array is undefined

이러한 것들은 render 함수에서 막아 줄 수 있다!!!

render() {
  if (!this.props.object || !this.props.array || this.props.array.length === 0) return null;
  // object 나 array 를 사용하는 코드
}
    

1. componentDidCatch

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

에러가 발생하게 되면 이렇게 componentDidCatch 가 실행하고, state.error 를 true 로 설정하고 render 함수쪽에서 이에 따라 에러를 띄워주면 된다.

주의할 점은, 컴포넌트 자신의 render 함수에서의 에러가 발생하는 것은 잡아낼 수 없지만 대신에 자식 컴포넌트 내부에서 발생하는 에러들은 잡을 수 있다.

componentDidCatch API 를 사용하면 render 부분에서 발생하는 오류로 앱이 종료될 때 빈 페이지를 출력하는 것이 아니라 에러가 발생했다는 문구를 띄우면서 UX를 높일 수 있는 것 같다
-> 이 부분의 추가적인 코드 실습은 React 설정 마치고 해보자

---

참고자료

• https://velopert.com/3631
• 구글 이미지