React Life Cycle 복습.

위 그림은 React 컴포넌트의 생성부터 삭제까지의 동작 과정이며 방법론이다.

 

render()를 제외하고 크게 세가지로 나뉜다.

1.Mounting(생성)

2.Updating(수정)

3.Unmounting(죽음)

 

<>

Mounting는 DOM이 생성되고 웹에 component가 나타나는 로직인데

컴포넌트가 생성되면 constructor가 호출되어 클래스 기본값을 설정하고

 

-componentWillmount(): 컴포넌트 UI 렌더링 전 호출

-render(): 컴포넌트 UI 렌더링

-componentDidMount(): 컴포넌트가 브라우저 위에 나타난 후 호출

 

순서로 진행된다.

</>

 

<>

Updating은

 

-props변경

-state변경

-부모 컴포넌트 리렌더링

-this.forceUpdate()실행 시

 

이루어지며(render가 재실행되며)

 

-shouldComponentUpdate(nextProps,nextState): 컴포넌트가 리랜더링 할지 말지 결정함. return true면 진행

-render(): 렌더링

-getSnapshotBeforUpdate(prevProps,prevState):컴포넌트변화를 DOM에 반영하기 직전에 호출

-componentDidUpdate(nextProps,nextState): 컴포너트 수정 후 호출되는 메서드

 

순으로 진행된다,

</>

 

마지막으로 Unmounting은 DOM에 생성되어있는 컴포터를 제거하는 과정인데

componentWillUnmount()로 컴포넌트가 브라우저(DOM)에서 사라지기 직전에 호출되어

실행된다.

 

 

 

위 메서드들은 class형 컴포넌트일때 사용되는 메서드들이나

함수형 프로그래밍을 할 때도 동일한 로직에 따라 useState, useEffect등 다양한 Hook들을 응용해

컴포넌트를 구성할 수 있다.