일반적인 Lifecycle
*mount : 컴포넌트가 처음 실행되는시기를 의미합니다.
Mounting
- 컴포넌트가 실행되고 constructor이 가장먼저 실행됨
- render가 되고 DOM과 refs가 업데이트됨
- componentDidMount가 실행됨
Updating
- New props, setState, forceUpdate()가 실행됨
- render가 되고 DOM과 refs가 업데이트됨
- componentDidUpdate가 실행됨
Unmounting
- componentWillUnmount가 실행됨
React Hook Lifecycle
Mounting
함수가 실행되면 결과를 반환합니다. (만약 useMemo로 되어있는 함수라면 내부에서 발생하는 연산을 최적화합니다.)
DOM과 refs를 업데이트하고 useEffect()와 useLayoutEffect()를 실행합니다.
Updating
useState(), useReducer(), useContext()가 실행되었을 때 진행됩니다.
useCallback을 통해서 렌더링 성능을 최적화합니다.
DOM과 refs를 업데이트하고 useEffect()와 useLayoutEffect()를 실행합니다.
Unmounting
seEffect()와 useLayoutEffect()를 실행합니다.
'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 |