ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 리액트 LifeCycle API (생명주기)
    Computer Science/React 2019.02.24 22:53

    LifeCycle API


    리액트 컴포넌트가 사용될 때 각 상황에 따라 호출된다.


    (1) 컴포넌트 초기 생성


    constructor  - 컴포넌트 생성자 함수 (컴포넌트가 새로 만들어질 때마다 호출)


    1
    2
    3
    4
    5
    6
    7
    constructor(props {
     
        super(props);
     
    }
     
     
    cs

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


    컴포넌트가 화면에 나타나게 됐을 때 호출 된다.


    (2) 컴포넌트 업데이트


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    static getDerivedStateFromProps(nextProps, prevState) {
     
        // 여기서는 setState를 하는 것이 아니라
     
        // 특정 props가 바뀔 때 설정하고 싶은 state 값을 리턴하는 형태로
     
        // 사용된다.
     
     
     
    /*
    if(nextProps.value !== prevState.value) {
        return { value: nextProps.value };
    }
    return null; // null을 리턴하면 따로 업데이트 할 것은 없다.
    shouldComponentUpdate(nextProps, nextState) {
        //return false 하면 업데이트를 안함
        //return this.props.checked !== nextProps.checked
    return true;
    }
    cs


    컴포넌트를 최적하하는 작업에서 매우 유용함.


    기본적으로 true 반환, 조건에 따라 false 반환하면 render 함수 호출 x


    1.render()


    2.getSnapshotBeforeUpdate()


    3.실제 DOM에 변화 발생


    4.componentDidUpdate


    DOM 변화가 일어나기 직전의 DOM 상태를 가져오고, 여기서 리턴하는 값은


    componentDidUpdate에서 3번째 파라미터로 받아올 수 있게 된다.


    https://codesandbox.io/s/484zvr87ow (getSnapshotBeforeUpdate 예제)


    componentDidUpdate


    컴포넌트에서 render()를 호출하고 난 다음에 발생


    this.props와 this.state가 바뀜.


    파라미터를 통해 이전 값인 prevProps 와 prevState를 조회할 수 있다.


    getSnapshotBeforeUpdate 에서 반환한 snapshot 값은 세번째 값으로 받아온다.


     (3) 컴포넌트 제거


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


    componentWillUnmount() {

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

    }

    댓글 0