HYEWON JUNG의 개발일지
component LifeCycle 생명주기 본문
Mount
- constructor
a. 컴포넌트가 맨 처음 만들어 질 때 호출
b. 생성자 - getDerivedStateFromProps
a. 부모 컴포넌트로부터 props를 전달 받을 때, state에 값을 일치시키는 역할 을 하는 메서드
b. 마운트 될 때, 리렌더링 될 때도 호출 - render 화면에 그리는 메소드
a. 최초 mount가 준비완료되면 렌더링하는 메서드
b. 컴포넌트를 DOM에 마운트 하기위해 사용 - componentDidMount
a. 컴포넌트가 브라우저에 표시가 된 다음에 호출되는 메서드
Update(렌더링 후 state값이변경, props가변경, 부모컴포넌트가 변경되었을 때)
- getDerivedStateFromProps(mount랑 동일)
- Mount 과정에서도 동일하게 호출되었던 메서드.
- 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 메서드
- shouldComponentUpdate
- 리렌더링 여부 판단(함수 호출 결과 : true / false)
- true인 경우 : 리렌더링 진행
- false인 경우 : 리렌더링 하지 않음
- 함수형 컴포넌트에서 memo, useMemo, useCallback이 역할을 대신한다.
- 리렌더링 여부 판단(함수 호출 결과 : true / false)
- render (mount랑 동일)
- 변경사항 반영이 다 되어 준비완료 되면 호출되는, 즉 렌더링 하는 메서드
- 컴포넌트를 DOM에 마운트하기 위해 사용
- getSnapshotBeforeUpdate
- 컴포넌트에 변화가 일어나기 직전 DOM의 상태를 저장
- componentDidUpdate 함수에서 사용하기 위한 스냅샷 형태의 데이터
- componentDidUpdate( getSnapshotBeforeUpdate 활용)
- 컴포넌트 업데이트 작업 완료 후 호출
Unmount
- componentWillUnmount
- 컴포넌트가 사라지기 전 호출되는 메서드
- useEffect의 return과 동일
'React' 카테고리의 다른 글
redux payload, Ducks (1) | 2023.11.12 |
---|---|
Redux (0) | 2023.11.10 |
React Hooks useContext, reactMemo, useCallback, useMemo (1) | 2023.11.09 |
useState, useEffect, useRef (0) | 2023.11.08 |
GlobalStyle, sass, css초기화 (0) | 2023.11.08 |