ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 리액트 개인 공부 정리 (3)
    Computer Science/React 2019.03.26 23:48

    20. Component Mounting Lifecycle

     

    (1) constructor(props)

     

    새로운 컴포넌트가 생성될 때 부르는 특별한 함수다.

     

    state를 초기화한다.

     

    event handler를 바인딩한다.

     

    side effect를 유발하지 않는다 

    ex) HTTP requests

     

    super(props)

     

    직접적으로 this.state 위에 쓴다.

     


     

    (2) static getDerivedStateFromProps(props, state)

     

    Component의 State가 시간에 따른 

     

    props의 변화에 의존할 때

     

    state를 설정한다.

     

    side effect를 유발하지 않는다 

    ex) HTTP requests

     


     

    (3) render() 

     

    오직 method 필요로 한다.

     

    props & state를 읽고 JSX 리턴한다.

     

    state를 변경하지 않고

     

    DOM과 상호작용하지 않고

     

    AJAX 요청하지 않는다.

     

    Children components Lifecycle methods들이 실행된다.

     


     

    (4) componentDidMount()

     

    컴포넌트 그리고 모든 자식 컴포넌트들이 출력한 뒤에 즉시 유발한다.

     

    side effects 일으킨다.

    ex) Interact with the DOM

    perform any ajax calls to load data

     


     

    21. Component Updating Lifecycle

     

    (1) static getDerivedStateFromProps(props, state)

     

    컴포넌트가 re-render 될 때 매번 호출된다. 

     

    state를 설정한다.

     

    side effect를 유발하지 않는다 

    ex) HTTP requests

     


     

    (2) shouldComponentUpdate(nextProps, nextState)

     

    컴포넌트가 re-render 할지 안 할지 지시한다.

     

    성능을 최적화한다.
     

    side effect를 유발하지 않는다 

    ex) HTTP requests

    Calling the setState method

     


     

    (3) render()

     

    오직 method 필요로 한다.

     

    props & state를 읽고 JSX 리턴한다.

     

    state를 변경하지 않고

     

    DOM과 상호작용하지 않고

     

    AJAX 요청하지 않는다.

     

    Children components Lifecycle methods들이 실행된다.

     


     

    (4) getSnapshotBeforeUpdate(prevProps, prevState)

     

    가상 DOM으로 부터 변화들이

     

    DOM에 반영되기 직전에 호출된다.

     

    DOM으로부터 일부 정보를 캡처한다.

     

    이 메서드는 null 또는 value를 리턴한다.

     

    리턴된 값은 세 번째 파라미터로 다음 메서드에 전달된다.

     


     

    (5) componentDidUpdate(prevProps, prevState, snapshot)

     

    re-render cycle에서 render가 끝난 뒤 호출된다.

     

    사이드 이펙트를 유발한다.

     


     

    22. Unmounting Phase Method

     

    componentWillUnmount()

     

    컴포넌트가 unmount, destroy 전에 즉시 호출된다.

     

    네트워크 요청 취소, 이벤트 핸들러 제거,

     

    어떤 요청 취소,

     

    setTimeout or setInterval로부터

     

    timer 무효화한다.

     

    setState 메서드를 호출하지 않는다.

     


     

    23. Error Handling Phase Methods

    (자세한 건 React 공식 문서 확인)

    (1) static getDerivedStateFromError(error)

     

    (2) componentDidCatch(error, info)

     

    lifecycle 메서드에서 혹은

     

    어떤 자식 컴포넌트의 생성자에서

     

    렌더링 동안에 에러가 발생할 때 쓰인다.

    댓글 0