Lifecycle?
: 생명주기(생애주기)
간단히 하면 탄생/ 변화 / 죽음
- Mount(탄생) - 화면에 나타나는 것
- Update(변화) - 업데이트, 리렌더
- UnMount(죽음) - 화면에서 사라짐
컴포넌트의 생명주기 동안에 우리가 각각 어떤 작업을 처리할 수 있는 것을 라이프사이클을 제어(이용)한다고 합니다.
예를 들어, Mount시점에 초기화 작업을 할 수 있고 Update시점에 예외 처리 작업을, UnMount시점에 메모리 정리 작업을 하는 것을 말합니다.
React Component Lifecycle Methods
클래스형 컴포넌트에서만 제공합니다. state도 사실은 클래스형에서만 사용이 가능했으나 함수형 컴포넌트에서도 React 16.8 버전부터 Hooks를 통해 함수처럼 불러와서 사용할 수 있습니다.
- ComponentDidMount
- ComponentDidUpdate
- ComponentWillUnmount
Class형 컴포넌트의 길어지는 코드 길이 문제, 중복 코드 가독성 문제 등등을 해결하기 위해 등장한 것이 바로 리액트 Hooks 이다.
- useEffect
- useState
- useRef
useEffect를 통해 마운트 시점, 업데이트 시점에 컴포넌트 제어하기
src/Lifecycle.js
import React, { useState, useEffect } from "react";
// 1.마운트 시점에 라이프사이클 제어하기
// 2. 업데이트 시점
// 3. 언마운트 시점
function Lifecycle() {
const [count, setCount] = useState(0);
const [text, setText] = useState("");
//useEffect(콜백함수, [deps])
//1.컴포넌트가 마운트됐을 때만 무언가를 처리하고 싶다면
//의존성 배열을 []빈배열로 주고 내부에 사이드 이펙트 작업을 해주면 된다.
useEffect(() => {
console.log("마운트했당!");
}, []);
//2. 업데이트 시 무언가를 처리하고싶다면, 의존성 배열을
//작성하지 않으면 된다.
// 즉, useEffect의 dependency Array만 잘 활용하면
// 우리가 감지하고 싶은 것만 컨트롤하여 쓸 수 있다.
useEffect(() => {
console.log("업데이트");
});
useEffect(() => {
if (count > 5) {
alert("count가 5를 넘어갔습니다! 주의!!! count를 1로 초기화합니다.");
setCount(1);
}
}, [count]);
useEffect(() => {
if (text.length === 0) {
return;
}
console.log(`업데이트된 text state의 값은 ${text} 입니다.`);
}, [text]);
return (
<div style={{ padding: 20 }}>
<div>{count}</div>
<button
onClick={() => {
setCount((prev) => prev + 1);
}}
>
+
</button>
<div>
<input
value={text}
onChange={(e) => {
setText(e.target.value);
}}
/>
</div>
</div>
);
}
export default Lifecycle;
Unmount시 컴포넌트 제어하기
src/LifecycleTwo.js
import React, { useEffect, useState } from "react";
// 😎한 js파일에서 여러 컴포넌트를 만들어도 된다.
// 테스트용도이기 때문에 가독성은 고려하지 않고 UnmountTest컴포넌트를 만들어보겠습니다.
const UnmountTest = () => {
return <div>unmount Testing Compo</div>;
};
function LifecycleTwo() {
const [isVisible, setIsVisible] = useState(false);
const toggleVisible = setIsVisible(!isVisible);
//단락회로 평가를 통해서 isVisible이 true 이면 뒤의 컴포넌트를 렌더링하고,
//아니라면 렌더링하지 않는 것으로
return (
<div>
<button onClick={toggleVisible}>ON/OFF</button>
{isVisible && <UnmountTest />}
</div>
);
}
export default LifecycleTwo;위의 예시 코드에서 에러가 났는데, 에러 메세지는 아래와 같다.
🔥 Too many re-renders. React limits the number of renders to prevent an infinite loop.
해석: 리렌더링이 너무 많이 발생해용.. 제가 컨트롤하겠슴다.
-리액트-
const toggleVisible = setIsVisible(!isVisible);원인: 해당 부분에서 함수 자체를 넘겨준 것이 아니라 할당값을 넘겨줬기 때문에 무한렌더링이 발생했다.
const toggleVisible = () => setIsVisible(!isVisible);에러해결: 화살표 함수로 변경하니 에러가 사라졌다. 실수하지 말기..!
다시 본론으로 돌아와 useEffect로 언마운트 시점에 컴포넌트를 제어해봅시다.
const UnmountTest = () => {
useEffect(() => {
console.log("마운트");
return () => {
//언마운트되는 시점에 발생하는 콜백함수를 리턴해주면 된다.
console.log("언마운트");
};
}, []);
return <div>unmount Testing Compo</div>;
};위와 같이 UnmountTest 컴포넌트가 언마운트됐을 때 useEffect의 콜백함수에 return값으로 콜백함수를 주면 언마운트 시에 해당 함수를 실행시킬 수 있다.(unmount시에 라이프사이클을 통해 컴포넌트를 제어한 것이죠.)
