반응형
Lifecycle methods
1. | type | component가 만들어질 때 실행 ( 기본 state를 설정할 수 있음 ) |
2. | componentWillMount() | component가 DOM에 렌더링전 실행 ( DOM 처리를 할 수 없음 ) |
3. | render | |
4. | componentDidMount() | component 결과가 DOM에 렌더링 된 후 작동 ( 다른 js 프레임워크 연동 및 setTimeout, setInterval 및 AJAX 사용, DOM 처리 가능 ) |
5. | componentWillReceiveProps() | 새로운 props를 받았을 때, props에 따라 state를 업데이트할 때 유용 ( setState 가능 ) |
6. | shouldComponentUpdate(nextProps, nextState) | component가 DOM에 업데이트를 할지 말지 정하는 부분 props/state가 변경되었을 때 리렌더링을 할지 말지 정함 실제로 사용시 필요한 비교를 하고 값 반환 필요 return nextProps.id !== this.props.id // true/false JSON.stringify를 사용하여 여러 field 비교 가능 |
7. | componentWillUpdate() | component가 DOM에 업데이트 되기 전 실행 ( setState 사용 X -> 무한루프 ) |
8. | componentDidupdate() | component가 DOM에 업데이트 후 실행 ( setState 사용X ) |
9. | componentWillUnmount() | component가 제거 될 때 실행 되는 메서드 |
unmount | componentWillUnmount() |
props를 받았을 때(처음) | componentWillReceiveProps() |
props가 업데이트 될 때 |
omponentWillUpdate |
render | |
componentDidUpdate |
반응형
'FRONTEND > React' 카테고리의 다른 글
React Typescript (CRA) 환경에서 Path Alias 설정하기 (0) | 2024.02.13 |
---|---|
React, Deck.gl, Mapbox(react-map-gl) 와 함께 한국어(ko) 처리하기 (0) | 2024.02.06 |
220902 React Textarea 컨텐츠 높이 자동 설정 (0) | 2022.09.02 |
210623 React Context (0) | 2021.07.04 |
210622 React Hooks (0) | 2021.07.04 |
댓글