[React]KUCC 리액트 세션: 6. Lifecycle

https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955

(React) React의 생명 주기(Life Cycle) - 라이프사이클

오늘 내용은 제로초님의 블로그에서 인용합니다. 더 원활한 이해를 위해 블로그에 있는 mount, update, unmount에 대해 한눈에 볼 수 있는 도표를 참고하시길 바랍니다. 

 

1. Mounting 

컴포넌트가 처음 실행되어 화면상에 나타나는 것을 Mount라고 표현합니다.

1)컴포넌트가 시작되면 우선 context(함수 등을 저장해두고 전역적으로 불러서 쓸 수 있도록 정해져 있는 것), defaultProps와 state를 저장합니다.

2)그 후에 componentWillMount 메소드를 호출합니다. (요즘은 잘 안 쓴다)

  => 주의할 점은, componentWillMount에서는 props나 state를 바꾸면 안 됩니다. Mount 중이기 때문이죠.

       그리고 아직 DOM에 render하지 않았기 때문에 DOM에도 접근할 수 없습니다.

3)그리고 render로 컴포넌트를 DOM에 부착한 후 (브라우저상에 나타낸다)

4)Mount가 완료된 후 componentDidMount가 호출됩니다. 

=> 이미 render가 한 차례 끝난 뒤 또 수정하거나 실행하고 싶은 함수가 따로 있으면 (ex. 서버요청, setTimeout, setInterval 등) componentDidMount로 event를 가져온다 

=> componentDidMount에서는 DOM에 접근할 수 있습니다.

그래서 여기에서는 주로 AJAX 요청을 하거나, setTimeout, setInterval같은 행동을 합니다.

 

cf. useEffect(마지막 , ([])); => 빈배열은 한번만 하도록  = didMount랑 같은 역할 

 

[정리하면 다음 순서로 실행됩니다.]

1. state, context, defaultProps 저장
2. componentWillMount
3. render
4. componentDidMount

 

2. Updating 

 

1) Props Update

 

props가 업데이트될 때의 과정입니다.

(다시 수정하거나 다른 함수를 실행할 때 update)

 

(1)업데이트 되기 전에 업데이트가 발생하였음을 감지하고, componentWillReceiveProps 메소드가 호출됩니다.

(2) 그 후 shouldComponentUpdate, 

  => 이미 틀을 다 짜놓고 mount한채로 event에 저장되어 있는 데이터를 가져왔는데 setState 등으로 인해 상태 변경되었을 때 다시 update를 해야하니까 shouldComponentUpdate로 한다

  => shouldComponentUpdate에서는 아직 render하기 전이기 때문에 return false를 하면 render을 취소할 수 있습니다. 주로 여기서 성능 최적화를 합니다. 쓸데없는 update가 일어나면 여기서 걸러내는 거죠.

(3) componentWillUpdate가 차례대로 호출된 후,

 =>주의사항이 있는데, componentWillUpdate에서는 state를 바꿔서는 안 됩니다.

아직 props도 업데이트하지 않았으므로 state를 바꾸면 또 shouldComponentUpdate가 발생합니다. 

(4)업데이트가 완료(render)

(5)componentDidUpdate가 됩니다.

 =>componentDidUpdate에서는 render이 완료되었기 때문에 DOM에 접근할 수 있습니다.

 

이 메소드들은 첫 번째 인자로 바뀔 props에 대한 정보를 가지고 있습니다.

componentDidUpdate만 이미 업데이트되었기 때문에 바뀌기 이전의 props에 대한 정보를 가지고 있습니다.(?)

1. componentWillReceiveProps
2. shouldComponentUpdate
3. componentWillUpdate
4. render
5. componentDidUpdate

2) State Update

setState 호출을 통해 state가 업데이트될 때의 과정입니다. props update와 과정이 같지만, componentWillReceiveProps(props에서 가장 먼저 호출되었던) 메소드는 호출되지 않습니다.

그리고 메소드의 두 번째 인자로는 바뀔 state에 대한 정보를 가지고 있습니다.

componentDidUpdate는 두 번째 인자로 바뀌기 이전의 state에 대한 정보를 가지고 있습니다.(?)

1. shouldComponentUpdate
2. componentWillUpdate
3. render
4. componentDidUpdate

3. Unmounting

 

컴포넌트가 제거되는 것은 Unmount라고 표현합니다.

더는 컴포넌트를 사용하지 않을 때 발생하는 이벤트가 있습니다. componentWillUnmount가 그것입니다.

차트 닫기, 호출한 함수 끝내기, 더 이상 사용하지 않는 함수 멈추기 등 ex. 계속 정보를 요청하면 컴터가 계속 무거워지니까, 메모리 누수 방지 등 적재적소로 사용하면 좋은 함수 

componentDidUnmount는 없습니다. 이미 제거된 컴포넌트에서 이벤트를 발생시킬 수는 없겠죠? componentWillMount에서 주로 연결했던 이벤트 리스너를 제거하는 등의 여러 가지 정리 활동을 합니다.

1. componentWillUnmount

다행히도 용도에 맞지 않는 메소드를 사용하면 React에서 자체적으로 에러 메시지를 띄워 줍니다.

componentDidMount나 render에 setState를 사용한 경우도 에러 메시지를 띄웁니다

 

cf. 함수는 클래스의 mount, update를 useEffect로 대체하고  
클래스의 unmount는 함수에서 clean-up hook을 이용하면 된다 

>>useEffect, clean-up 더 알아보기

https://medium.com/@dayong/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85-react-hooks-3-useeffect-6b781a6c6769

리액트 훅(React Hooks) #3 useEffect😃