React Life Cycle

리액트를 사용하다보면 Life Cycle(생명주기)라는 말을 자주 듣게 된다.
중요한 개념이니까 자주 나오는 것 같으니 알아보도록 하자.

✔누구의 생명 주기인가

컴포넌트의 생명 주기를 말하며, 모든 리액트 컴포넌트는 생명주기가 존재한다

컴포넌트가 생성되고 업데이트되고 제거되는 3가지 과정을 생명 주기라 한다

생성: 마운팅(Mounting)
업데이트: 업데이팅(Updating)
제거: 언마운팅(Unmounting)

각각의 과정이 어떤 과정인지 알아보자.

📌마운팅(Mounting)

컴포넌트가 탄생하는 순간
화면에 처음 렌더링 되는 순간

ex. "A 컴포넌트가 Mount 되었다" => A 컴포넌트가 화면에 처음으로 렌더링 되었다.

📌업데이팅(Updating)

컴포넌트가 다시 렌더링 되는 순간
리렌더링 될 때를 의미

ex. "A 컴포넌트가 업데이트 되었다" => A 컴포넌트가 리렌더링 되었다.

📌언마운팅(Unmounting)

컴포넌트가 회면에서 사라지는 순간
렌더링에서 제외 되는 순간을 의미

ex. "A 컴포넌트가 언마운트 되었다" => A 컴포넌트가 화면에서 사라졌다.

✔왜 생명주기를 가지는가?

리액트는 컴포넌트로 이루어져 있다.
컴포넌트을 효율적으로 관리 하기 위해 개발자가 라이프사이클을 설계해 두었다.

컴포넌트를 효율적으로 관리한다는 것은
자원 관리, 상태 관리, 성능 최적화, 사용자 경험 향상을 위함이다.

💡자원 관리 : 컴포넌트가 생성 되거나 소멸 될때, 이벤트 리스너 등록/해제 혹은 네트워크 요청/취소 등을 통해 메모리를 관리
💡상태 관리 : 컴포넌트가 업데이트 될 때 (리랜더링) , 새로운 props를 기반으로 로직을 처리 할 수 있다
💡성능 최적화 : 컴포넌트가 다시 랜더링 될 필요가 없는 경우를 감지 -> 불필요한 랜더링을 방지
💡사용자 경험 향상 : 애니메이션, 데이터 로드, 사용자 인러택션 기능을 올바른 시점에 실행되도록 보장

✔알면 뭐가 좋은지?

컴포넌트의 Life Cycle을 잘 이해하고 있다면
우리가 원하는 타이밍에 컴퍼넌트에게 어떠한 작업을 시킬 수 있다.

ex. 마운트 타이밍에 네트워크 데이터를 불러오는 작업
업데이트 타이밍에 어떤 값이 변경되었는지 콘솔 출력
언마운트 타이밍에 컴포넌트가 사용했던 메모리 정리

불필요한 리랜더링을 방지할 수 있다.

✔어디에 쓸 수 있는 개념인지?

함수 리액트에서 useEffect() Hook으로 컴포넌트의 life Cycle을 제어 할 수 있다.

클래스 컴포넌트로 life Cycle을 제어해 왔지만 요새 추세는 함수형 컴포넌트로 제어를 하기에 함수형 컴포넌트의 life Cycle 제어하는 방법만을 소개해 두었다.

마운트

 useEffect (() => {
  console.log("mount");
 }, []);

컴포넌트의 첫 랜더링 이후 useEffect의 첫번째 아규먼트인 콜백함수가 실행 된다.
이후 빈 배열이기 때문에 state 값이 변해도 더 이상 작동하지 않는다.

컴포넌트가 마운트 될 때 -> 콜백 함수 실행(원하는 작업 적용)

업데이트

 useEffect (() => {
  console.log("update");
 });

컴포넌트가 랜더링 될 때마다 useEffect()의 아규먼트인 콜백 함수가 실행 된다.
첫 번째 랜더링에서 실행 없이 리랜더링 될 때에만 콜백 함수를 실행하고 싶다면
레퍼런스 객체와 조건문을 사용해서 구현 할 수 있다.

const isMount = useRef(false);

 useEffect (() => {
 if(!isMount.current) {
 	isMount.current = true;
 	return;
 }
   console.log("update");
 });

컴포넌트 업데이트 단계에서만 콘솔 출력이 일어남

언마운트

 useEffect (() => {
 	console.log("mount")
 
   return () => {
   	console.log("unmount");
   };
 }, []);

useEffect() 안의 return문을 클린업, 정리함수라고 불리는데
useEffect 함수가 끝날 때 실행이 된다.

컴포넌트가 mount 될 때(첫 랜더링) "mount"가 출력되고
컴포넌트가 unmount 될 때(랜더링에서 사라짐) "unmount"가 출력된다.