카테고리 없음

React LifeCycle

이훈히 2024. 6. 10. 17:42
리액트 생명주기란
리액트 컴포넌트는 각각 Mount ->Update ->Unmount 과정을 거침
사람에 비유하자면 태어나고 변화하고 죽는
리액트 생명주기란, 컴포넌트 중심 라이브러리의 집합체라고 보면
모든 컴포넌트에는 각각의 생명주기가 존재하고 생명주기에 맞는 메서드 들이 있음
리액트에서 말하는 생명주기란 클래스형 컴포넌트에서의 메서드등의 생명주기
1.Mount 컴포넌트가 생성될때
다음과 같은 메서드가 있음
1-1 constructor
컴포넌트가 처음 만들어 호출,생성자함수라고 부름
1-2 getDerivedStateFromProps
부모 컴포넌트로 부터 props를 전달 받을 , state에 값을 일치시키는 열할 하는 메서드
마운트 , 업데이트(리렌더링) 때도 호출
1-3 render
최초 mount가 준비완료 되면 호출되는, 렌더링 하는 메서드
컴포넌트를 DOM에 마운트하기 위해 사용
1-4 componentDidMount
컴포넌트가 브라우저에 표시가 호출되는 메서드

2.Update
2-1getDerivedStateFromProps
Mount 과정에서도 동일하게 호출되었던 메서드.
부모 컴포넌트로부터 props를 전달받을 , state에 값을 일치시키는 역할을 하는 메서드
2-2 shouldComponentUpdate
리렌더링 여부 판단(함수 호출 결과 : true / false)
      1. true인 경우 : 리렌더링 진행
      2. false인 경우 : 리렌더링 하지 않음
함수형 컴포넌트에서 memo, useMemo, useCallback이 역할을 대신한다.
2-3. render
변경사항 반영이 되어 준비완료 되면 호출되는, 렌더링 하는 메서드
컴포넌트를 DOM에 마운트하기 위해 사용
2-4 getSnapshotBeforeUpdate
컴포넌트에 변화가 일어나기 직전 DOM의 상태를 저장
componentDidUpdate 함수에서 사용하기 위한 스냅샷 형태의 데이터
2-5. componentDidUpdate
컴포넌트 업데이트 작업 완료 호출

3. Unmount
3-1 componentWillUnmount
컴포넌트가 사라지기 호출되는 메서드
useEffect의 return과 동일