component생명주기 다시공부

[cannalee90]

뭔가 잘못알고 있었던 점이 있었던거 같다

[cannalee90]

https://legacy.gitbook.com/book/developmentarc/react-indepth/details

[cannalee90]

어렴풋이 알고있었던거 다시 정리

1. componentWillMount()에서 defaultProps에서 stateProps가 넘어오는줄 알았는데, 문서를 다시 읽어보니까 애초에 connect()함수가 HOC니까 redux에 있는 props들이 처음부터 넘어오는 것이었다.

https://github.com/reactjs/react-redux/blob/428b67b2dbbf4b80ee2222f9393abfcabfd8aa76/src/connect/mergeProps.js#L3

[cannalee90]

2. componentDidMount()에서 fetch를 하도록 하는게 맞다. 서버사이드 렌더링을 할 경우 componentWillMount()가 호출되기 때문에 componentDidMount()에서 호출하는게 맞다.

https://hackernoon.com/where-to-integrate-api-calls-in-reactjs-componentwillmount-vs-componentdidmount-710085dc05c3

[cannalee90]

https://cdn-images-1.medium.com/max/2000/1*sn-ftowp0_VVRbeUAFECMA.png

[cannalee90]

initilize construct()

state를 초기화 한다 defaultProps과 새로운 Props들을 머지한다 Component를 생성할때 딱 한번만 호출된다.

[cannalee90]

Mounting

componentWillMount

• 컴포넌트들이 돔에 마운트 되기전에 호출된다.
• render가 되기전 딱 한번 호출된다.
• 현재 construct()와 통합해야한다는 토론이 이어지고 있음.

render()

componentDidMount()

• first render직후 딱 한번 실행된다.
• render 직후기 때문에 돔에 엑세스 할 수 있다. 따라서 D3나 Jquery같은 dom을 쓰는 라이브러리를 초기화 할 수있다.
• data fetch()를 하기 좋은 위치

[cannalee90]

Update

새로운 props를 받거나 state를 업데이트할때 발동

state가 업데이트 될때는 다음과 같이 호출된다

shouldComponentUpdate()

• return true or false (boolean)
• 렌더링 비용이 클때 렌더를 하게 될지 안하게 될지 결정

componentWillUpdate()

• shouldComponentUpdate()가 true를 리턴하면 실행된다.

• 특정 아이템을 렌더하기전 계산이나 준비를 할때 사용하면 된다.

• render()

componentDidUpdate()

• 돔에 새롭게 업데이트되고 생성
• 주로 써드파티 라이브러리들을 다시 업데이트하거나 리로드할때 쓰인다

componentWillReceiveProps

• 새롭게 props이 바뀔때 생성된다.
• props에 의존적인 state를 업데이트할때 사용된다. 이곳에서 state를 업데이트해도 새롭게 리렌더링되지 않음

shouldComponentUpdate componentWillUpdate render componentDidUpdate

가 실행된다

[cannalee90]

Unmounting

• 컴포넌트가 돔에서 제거될때 실행되는 메소드이다.
• component가 dom에서 제거되기 직전에 딱 한번 호출된다.
• dom이나 component에 관련된 모든걸 클린업하면 됨..

[cannalee90]

이상 https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0 정리