본문 바로가기

프론트앤드 수업

[React 이론] 라이프 사이클

728x90

함수형 컴포넌트는 Hooks 기능을 사용하여 처리 - 16버전에 새로나왔으며 요즘엔 함수형을 거의 사용
라이프 사이클 메서드 - 클래스 컴포넌트

라이프사이클 - 수명주기
컴포넌트의 수명은 페이지에 랜더링 되기 전인 준비 과정에서 시작해서 페이지에서 사라질때 끝남
 Hooks 
1)useState 
2)useRef
3)useEffect

라이프사이클의 수명주기는 3가지로 구분
1. 마운트 : 페이지에 컴포넌트가 나타남
constructer 컴포넌트를 새로 만들때 마다 호출되는 클래스 생성자 메서드 ->
getDerivedStataFromProps : props에 있는 값을 state에 넣을때 사용되는 메서드 ->
render : 준비한 UI를 랜더링하는 메서드 ->
componentDidMount : 컴포넌트가 웹 브라우저에 나타난 후 호출되는 메서드

2. 업데이트 : 컴포넌트 정보를 업데이트 - 리렌더링
1. props가 변경될때
2. state가 변경될때
3. 부모의 컴포넌트가 리렌더링 될때
4. this.forceUpdate로 강제로 랜더링 트리거할 때
업데이트 발생
getDerivedStataFromProps ->
shouldComponentUpdate : 컴포넌트가 리랜드링 해야할지 말아야할지 결정하는 메서드 ->
true반환시 render호출, false반환시 작업 취소 
render ->
getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 직전에 호출하는 메서드 ->
componentDidUpdate : 컴포넌트 업데이트 작업이 끝난 후 호출하는 메서드 ->

3. 언마운트 : 페이지에 컴포넌트가 사라짐
componentWillUnmount : 컴포넌트가 웹브라우저 상에서 사라지기 전에 호출되는 메서드

함수형 컴포넌트
useEffect : 컴포넌트가 마운트 됐을때, 언마운트 됐을때, 업데이트 될때 특정 작업을 처리하는 Hooks

728x90
댓글