ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [React] this.setState를 호출할 때 호출되는 메소드들
    카테고리 없음 2017. 2. 25. 22:22
    728x90

    위 사진은 컴포넌트의 라이프사이클이다.

    this.setState를 호출했을 때 컴포넌트의 렌더링이 다시 된다는 것을 책과 문서에서 확인했다.

    과연 어느 메소드까지 실행되는지 테스트를 해보았다.



    위 코드대로 실행을 했다. 

    Updating 부분의 메소드 순으로 나열하였고, 이벤트핸들러(handleClick)를 도중에 집어넣었다.

    이를 실행시킨 결과는 다음과 같다.

    shouldComponentUpdate

    componentWillUpdate

    render

    componentDidUpdate


    이렇게 4가지 메소드가 호출된 것을 확인할 수 있다.

    즉, Updating에서 componentWillReceiveProps를 제외한 나머지 메소드들이 순차적으로 실행된다는 것을 확인할 수 있다.



    여기서 궁금할 수 있는 사항은 shouldComponentUpdate에서 false를 반환하는 경우나 프로그래머가 오버라이딩 하지 않은 경우를 생각해봤다. 


    1) 강제로 false를 반환하도록 한 경우

    shouldComponentUpdate 이후의 메소드들이 실행되지 않는 것을 확인할 수 있다.


    2) 오버라이드하지 않은 경우

    shouldComponentUpdate의 다음 메소드들이 잘 실행된 것을 확인할 수 있다.(주의! shouldComponentUpdate가 호출되지 않은 것이 아니고, 오버라이드해주지 않았기 때문에 console.log가 찍히지 않은 것 뿐임.) 추가로 return true;를 반환해 주었다는 것도 확인할 수 있다.

Designed by Tistory.