React(리액트) ; Lifecycle API

< React(리액트) ; Lifecycle API >

 

1. Lifecycle API

 - component 가 브라우져에 나타나고, 업데이트되고, 사라지거나 에러가 발생할 때 호출되는 API

 - [ create Component à update Component à delete Component ] & Component error

 

2. create Component

 

1) constructor

 - 컴포넌트 생성자 함수

 - 컴포넌트 생성시마다 호출됨

constructor(props) {

    super(props);

  }

 

2) componentWillMount

 - 컴포넌트가 브라우져에 나타나기 직전에 호출됨.

 - 리액트 v16.3에서는 더 이상 사용되지 않음.(UNSAFE_componentWillMount() 로 사용은 가능하지만 권장되지 않음.)

 - constructor 와 componentDidMount 로 component 생성에 대한 부분은 모두 처리 가능함.

componentWillMount() {

 

}

 

3) componentDidMount

 - 컴포넌트가 브라우져에 나타난 후 호출됨.

 - 용도

   a. 외부 라이브러리 연동 : D3, masonry 등

   b. 데이터 요청 : Ajax 요청(axios, fetch), GraphQL 등

   c. DOM 관련 작업 : 스크롤 설정, 크기 등 DOM 속성 읽어오거나 변경

componentDidMount() {

    // 외부 라이브러리 연동: D3, masonry, etc

    // 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc

    // DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등

  }

 

 

3. update Component

 

1) componentWillReceiveProps

 - 컴포넌트가 새로운 props 를 받게될 때 호출됨.

 - 내용에는 props에 따라 state가 변하는 로직이 작성됨.

 - this.props(업데이트 되기전), nextProps(새로 받게될 props)

- 리액트 v16.3에서는 더 이상 사용되지 않음.(UNSAFE_ componentWillReceiveProps() 로 사용은 가능하지만 권장되지 않음.) à getDerivedStateFromProps 로 이 API의 기능 구현 가능함.

componentWillReceiveProps(nextProps) {

    // this.props 는 아직 바뀌지 않은 상태

  }

 

2) static getDerivedStateFromProps

 - props 로 받아온 값을 state로 동기화

static getDerivedStateFromProps(nextProps, prevState) {

    // 여기서는 setState 를 하는 것이 아니라

    // 특정 props 가 바뀔 때 설정하고, 설정하고 싶은 state 값을 리턴

    /*

    if (nextProps.value !== prevState.value) {

      return { value: nextProps.value };

    }

    return null; // null 을 리턴하면 따로 업데이트 할 것은 없다라는 의미

    */

  }

 

3) shouldComponentUpdate

 - 리액트는 Virtual DOM에 상태를 그려줌으로써 변화가 발생한 부분만을 감지해서 업데이트를 하게됨. 부모 컴포넌트에 변화가 발생해서 리렌더링되면 자식 컴포넌트도 Virtual DOM에 렌더링되게되어 CPU 사용이 늘어나는데 CPU 처리량을 줄여주기 위해서 자식 컴포넌트가 특별한 경우에만 render 함수를 호출하도록 설정하는데 사용.

 - 기본적으로 true 를 반환하여 업데이트를 진행하며, flase 를 반환하는 특정 조건을 넣어주면, 해당 조건에서는 render 함수를 호출하지 않게되어 CPU 자원의 낭비를 줄여줌.

shouldComponentUpdate(nextProps, nextState) {

    // return false 하면 업데이트를 안함

    // return this.props.checked !== nextProps.checked

    return true;

  }

 

4) compoenntWillUpdate

 - shouldComponentUpdate 에서 true를 반환해서 업데이트가 진행되는 경우에 호출됨.

 - 이 함수 호출된 후 render()가 호출됨.

 - 용도 : 애니메이션 효과 초기화, 이벤트 리스너 초기화 등

 - 리액트 v16.3에서는 더 이상 사용되지 않음. à getSnapshopBeforeUpdate 로 이 API의 기능 구현 가능함.

componentWillUpdate(nextProps, nextState) {

 

}

 

5) getSnapshoptBeforeUpdate

 - 실제로 DOM에 변화가 발생하는 경우, DOM 변화 직전의 상태를 snapshot 찍고, 이 함수가 리턴하는 값(snapshot)은 componentDidUpdate 가 3번째 parameter로 받아오게 됨. (실제 리턴값에 snapshot 이 없어도 기본적으로 받아올 수 있음.) à componentDidUpdate 에서 snapshpt.scrollTop, snapshot.Height 등의 방법으로 snapshot 의 하위 속성값을 이용 가능.

getSnapshotBeforeUpdate(prevProps, prevState) {

    if (prevState.array !== this.state.array) {

      const {

        scrollTop, scrollHeight

      } = this.list;

      return {

        scrollTop, scrollHeight

      };

    }

  }

 

  componentDidUpdate(prevProps, prevState, snapshot) {

    if (snapshot) {

      const { scrollTop } = this.list;

      if (scrollTop !== snapshot.scrollTop) return;

      const diff = this.list.scrollHeight - snapshot.scrollHeight;

      this.list.scrollTop += diff;

    }

  }

 

6) componentDidUpdate

 - 컴포넌트에서 render()를 호출한 다음에 실행됨.

 - getSnapshoptBeforeUpdate 와 함께 사용.

componentDidUpdate(prevProps, prevState, snapshot) {

 

}

 

4. delete Component

 

1) componentWillUnmount

 - 컴포넌트가 더 이상 필요하지 않게 된 경우 사용하여, 등록했던 이벤트 제거, clearTimeout을 사용하여 setTimeout 제거, 외부 라이브러리에 dispose 기능이 있다면 호출해서 외부 라이브러리 제거.

componentWillUnmount() {

    // 이벤트, setTimeout, 외부 라이브러리 인스턴스 제거

  }

 

 

5. 기타 : Component error 발생

 

1) componentDidCatch

 - 에러 발생시 componentDidCatch 실행, this.setState를 이용해서 error를 true로 설정하고, render 함수에서 에러 메시지를 띄움.

 -  컴포넌트 자신의  render 함수에서 발생하는 에러를 처리할 수는 없고, 자식 컴포넌트에서 발생하는 에러를 잡아내서 처리할 수 있음.

componentDidCatch(error, info) {

    this.setState({

      error: true

    });

  }

 

2) 주로 발생하는 에러 처리

 - 주요 에러 발생 상황 : 존재하지 않는 함수 호출, 존재하지 않는 객체나 배열 사용 등

 - 에러 처리 : render 함수를 이용해서 처리

render() {

    if (!this.props.object || !this.props.array || this.props.array.length ===0) return null;

    // object 나 array 를 사용하는 코드

  }