[React] 함수형 컴포넌트의 생명주기

함수형 컴포넌트의 생명주기

https://wavez.github.io/react-hooks-lifecycle/

생명주기란?

React에서 컴포넌트는 생명주기를 가질 수 있다.

생명주기란, 컴포넌트의 생성 ➡️ 렌더링 ➡️ 소멸까지의 과정을 말한다.
함수형 컴포넌트에서 생명주기는 useEffect를 통해 구현된다.

함수형 컴포넌트에서는 리 렌더링이 일어날 때마다 기존의 컴포넌트는 사라지고 완전히 새로운 컴포넌트를 생성해서 반환한다.

용어정리

Mounting(생성 후 최초 렌더링)
⬇️
Updating(업데이트에 의한 재 렌더링)
⬇️
Unmountiong(컴포넌트가 화면에서 사라짐.)

---

class 컴포넌트에서 생명주기 구현에서는 이 생명주기 과정에 따라 사용되는 함수가 모두 다르다. class 컴포넌트에서는 아래 3가지의 각각 다른 기능을 하는 함수가 있다.

• componentDidMount (최초 마운트)

• componentDidUpdate (화면 재 렌더링)

• componentWillUnmount (컴포넌트의 소멸)

이 세가지를 하나에 합쳐둔 것이
함수형 컴포넌트의 useEffect 라고 생각하면 이해하기 쉽다.

useEffect 사용법

useEffect(setup, dependencies?)

일단 마운트 시에 useEffect가 한번은 실행된다.

1. 최초 렌더링(Mounting) 시에만 사용하고 싶을 때

useEffect(() => {
  //최초 렌더링 시에만 실행할 함수가 들어가는 자리
},[]);

두번째 인자로 받는 배열은 배열 안에 명시된 값이 변할 때 함수가 실행되도록 하는 일종의 조건문같은 역할.

지금 배열은 존재하지만, 빈 배열이기 때문에 처음 한번 마운트 될때만 실행되고 그 이후에는 렌더링이 일어나도 함수는 실행되지 않는다.

2. 렌더링 될 때마다 함수를 실행시키고 싶을 때

useEffect(() => {
	// 렌더링될 때마다 함수가 실행된다.
});

배열 자체가 존재하지 않기 때문에,
렌더링이 일어날 때마다 함수가 계속 실행된다.

3. 특정 값이 변할 때만 함수를 실행시키고 싶을 때

useEffect(() => {
	//  마운트 시 + 배열 안의 어떠한 값이 변경될 때마다 함수 실행
},[어떠한 값]);

배열에 지정해준 값에 변화가 일어날 때마다 재렌더링이 발생한다.
최초 마운트 + 그 이후 배열 안의 값이 변할 때마다 재랜더링됨.

+++ useEffect에서 return

useEffect(() => {
	//  마운트 시 + 배열 안의 어떠한 값이 변경될 때마다 함수 실행
  return() => {/*화면에서 사라질 때 실행되는 함수(Unmount 시 실행)*/}
});

생명주기 함수의 필요성

React 생명주기 함수는 컴포넌트의 생성과 업데이트, 삭제 과정에 효율적으로 접근할 수 있게 해준다는 점에서 의의가 있다.

원래는 클래스 컴포넌트에서만 쉽게 가능했던 것이 hook이 등장하면서, 함수형 컴포넌트에서도 이와 같은 작업이 가능해졌다.