[React JS] 라이프 사이클(Life Cycle)

 

리액트 컴포넌트에는 라이프 사이클(생명 주기)이 존재한다.

컴포넌트의 수명은 페이지에 렌더링 되기 전 준비 과정부터 페이지에서 사라질 때까지 지속된다.

 

< 라이프 사이클 사용 이유 >

• 컴포넌트를 처음으로 렌더링할 때 어떤 작업 처리해야 할 지
• 업데이트 전후 어떤 작업 처리할 지
• 불필요한 업데이트 방지

위와 같은 이유에서 컴포넌트 라이프 사이클 메서드 사용하거나 Hooks 기능 사용

 

 

클래스형 컴포넌트 라이프 사이클

함수형 컴포넌트 라이프 사이클

 

 

라이프 사이클은 크게 3단계로 이루어진다.

1. 마운트(Mount): 처음 컴포넌트 불러와 생성하는 단계

2. 업데이트(Update): 아래 이유로 데이터가 바귀거나 부모 컴포넌트의 렌더링 발생할 때

• props가 바뀔 때
• state가 바뀔 때
• 부모 컴포넌트 리렌더링될 때
• 강제로 업데이트 되었을 때

3. 언마운트(Unmount): 페이지를 이동하거나, 사용자의 행동으로 인해 컴포넌트가 화면에서 사라지는 단계

 

 

마운트(Mount)

DOM이 생성되고 웹 브라우저 상에 나타나는 것

 

이때 호출되는 메서드와 Hooks은 아래와 같다.

 

< 클래스형 >

1. constructor

: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드

: 컴포넌트가 생성되면 가장 먼저 실행되고 초기 state를 정할 수 있다.

 

 

2. getDerivedStateFromProps

: props에 있는 값을 state에 넣을 때 사용하는 메서드

 

 

3. render

: 컴포넌트를 렌더링하는 메서드

 

 

4. componentDidMount

: 컴포넌트가 웹 브라우저 상에 나타난 후 호출하는 메서드

: 컴포넌트의 첫 렌더링이 마치고 나면 호출되는 메서드

: 이 메서드가 호출될 때는 컴포넌트가 화면에 나타나있는 상태

 

 

< 함수형 >

1. 컴포넌트 내부

: 컴포넌트가 호출될 때 가장 먼저 호출되는 것이 컴포넌트 내부이다.

: state를 정의하거나 사용될 함수들에 대해 미리 정의하는 공간

: 클래스형 컴포넌트의 constructor와 동일한 기능

 

 

2. return을 이용해 컴포넌트 렌더링

 

 

3. useEffect

: 클래스형 메서드의 componentDidMount, componentDidUpdate, componentDidUnmount까지 나타낼 수 있다.

const Practice = () => {
  useEffect(() => {
    ...
  }, []);
}

[ ]를 비울 경우) 컴포넌트가 처음 나타날 때만 useEffect에 등록한 함수 호출

[ ]에 특정 값 넣을 경우) 컴포넌트가 처음 마운트될 때 호출. 지정한 값이 바뀔 때에도 호출.

값이 있을 경우 언마운트시 호출. 값이 바뀌기 직전에도 호출

 

 

 

업데이트(Update)

< 클래스형 >

1. getDerivedStateFromProps

: 마운트 과정에서도 호출. 업데이트 시작 전에도 호출

: props 변화에 따라 state 값 변화 주고싶을 때 사용

 

 

2. shouldComponentUpdate

: 컴포넌트를 리렌더링 할지 말지 결정하는 메서드

: true, false를 리턴하여 리턴 결과에 따라 DOM에 리렌더링 여부 결정된다.

: 성능 개선을 위해 사용 가능

 

 

3. render

: 마운트 단계와 동일

 

 

4. getSnapshotBeforeUpdate

: Virtual DOM과 실제 DOM에 반영되기 직전에 실행된다.

 

 

5. componentDidUpdate

: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

 

 

< 함수형 >

1. useEffect()

 

 

 

언마운트(Unmount)

< 클래스형 >

1. componentWillUnmount

: 컴포넌트가 DOM에서 지워질 때 실행

: 컴포넌트가 웹 브라우저상에서 사라지기 전 호출

 

 

< 함수형 >

1. useEffect()

 

 

 

	클래스형 컴포넌트	함수형 컴포넌트
마운트	constructor()	함수형 컴포넌트 내부
마운트	render()	return()
마운트	componentDidMount()	useEffect()
업데이트	componentDidUpdate()	useEffect()
언마운트	componentWillUnmount()	useEffect()