728x90
React 라이프사이클
생성 ➡️ 업데이트 ➡️ 제거
- 클래스 컴포넌트는 라이프사이클 메소드를 활용함
- 함수형 컴포넌트는 Hook을 활용함
React 라이프사이클 메소드
- 마운트 (생성) : 컴포넌트의 인스턴스가 생성되어 DOM에 삽입될 때 순서대로 호출
- constructor() :
- 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메소드
- this.prop, this.state에 접근할 수 있으며 리액트 요소 반환
- setState를 사용할 수 없으며 DOM 에 접근해서는 안됨
- getDerivedStateFromProps()
- props에 있는 값을 state에 동기화 시킬 때 사용하는 메소드
- render()
- UI를 렌더링하는 메소드
- componentDidMount()
- 컴포넌트가 웹 브라우저 상에 나타난 후 즉, 첫 렌더링을 마친 후 호출하는 멧드
- 라이브러리나 프레임워크의 함수를 호출하거나 이벤트 등록, setTImeout과 같이 비동기 작업 처리
- constructor() :
- 업데이트 : props나 state 가 변경되면 렌더가 진행되며 순서대로 호출
- getDerivedStateFromProps()
- 마운트 과정에서 호출되며, 업데이트가 시작하기 전에도 호출
- props의 변화에 따라 state 값에도 변화를 주고 싶은 경우에 사용
- shouldComponetUpdate()
- props 또는 state를 변경했을 때 리렌더링을 시작할지 여부를 지정하는 메소드
- render()
- 컴포넌트 리렌더링
- getSnapshotBeforeUpdate()
- 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메소드
- componentDidUpdate()
- 컴포넌트 업데이트 작업이 끝난 후 호출하는 메소드
- getDerivedStateFromProps()
- 언마운트 (제거) : 컴포넌트를 DOM에 제거하는 과정
- componentWillUnmount()
- 컴포넌트를 제거할 때 실행
- componentWillUnmount()
728x90
'FE > React' 카테고리의 다른 글
[FE / REACT] 커스텀 훅 (Custom Hook) (0) | 2023.12.10 |
---|---|
[FE / REACT] React에서 Kakao Map API 연동하기 (1) | 2023.12.07 |
[FE / REACT] Redux vs Recoil (0) | 2023.10.24 |
[FE / REACT] key props (0) | 2023.10.19 |
[FE / REACT] Props Drilling (0) | 2023.10.10 |