티스토리 뷰

React

[React] 라이프 사이클

J3SUNG 2021. 2. 3. 09:53

일반적인 Lifecycle

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

*mount : 컴포넌트가 처음 실행되는시기를 의미합니다.

Mounting
- 컴포넌트가 실행되고 constructor이 가장먼저 실행됨
- render가 되고 DOM과 refs가 업데이트됨
- componentDidMount가 실행됨

Updating
- New props, setState, forceUpdate()가 실행됨
- render가 되고 DOM과 refs가 업데이트됨
- componentDidUpdate가 실행됨

Unmounting
- componentWillUnmount가 실행됨

 

React Hook Lifecycle

https://medium.com/@galmargalit/react-function-components-hooks-lifecycle-diagram-14f76e0a5988

Mounting
함수가 실행되면 결과를 반환합니다. (만약 useMemo로 되어있는 함수라면 내부에서 발생하는 연산을 최적화합니다.)
DOM과 refs를 업데이트하고 useEffect()와 useLayoutEffect()를 실행합니다.

Updating
useState(), useReducer(), useContext()가 실행되었을 때 진행됩니다.
useCallback을 통해서 렌더링 성능을 최적화합니다.
DOM과 refs를 업데이트하고 useEffect()와 useLayoutEffect()를 실행합니다.

Unmounting
seEffect()와 useLayoutEffect()를 실행합니다.

728x90

'React' 카테고리의 다른 글

[React] props, defaultProps, propTypes  (0) 2021.03.06
[React] React Native  (0) 2021.02.09
[React] 주요 훅스  (0) 2021.02.03
[React] Class Component, Function Component  (0) 2021.02.03
[React] Webpack, Babel, Create React App  (0) 2021.02.03
댓글
댓글쓰기 폼
공지사항