[일기장 만들기_07] Lifecycle 제어하기 - useEffect

🤷‍♀️ 컴포넌트의 생애주기(Lifecycle)

Lifecycle은 컴포넌트의 탄생부터 죽음까지의 단계를 말하며, 여러지점에서 개발자가 작업을 수행 할 수 있도록 매서드를 오버라이딩 할 수 있게 해준다. Lifecycle은 클래스형 컴포넌트에서만 사용이 가능하다.

그렇다면 화살표 함수로 만든 함수형 컴포넌트에서는 못쓰는 걸까? 리액트의 기능인 React Hooks를 활용하면 함수형에서도 충분히 사용 가능하다.

 

🤷‍♀️ React Hooks 이란?

2019년06월 정식 출시된 기능으로, Class형 컴포넌트의 길어지는 코드길이 문제를 보완하고 중복코드, 가독성 문제 등등을 해결하기 위해 등장했다.

 

👉 리액트의 함수형 컴포넌트에서 라이프사이클을 제어 하기 위해서는 useEffect라는 React Hooks를 사용

 

😎 사용방법

useEffect또한 React가 제공하는 기능 중 하나이므로, React에서 import받아와야 한다.

 

useEffect는 두개의 파라미터를 전달하는데

- 첫번째파라미터로는 콜백함수를 전달한다.

- 두번째 파라미터는 댑스라고해서 의존성배열(dependency array)을 전달해줘야한다.

 

댑스에 들어있는 값중 하나라도 변경되면 첫번째 파라미터인 콜백함수가 수행된다.

---

❤️‍🔥 Mount 예제코드

import React,{useEffect,useState} from "react";

const Lifecycle = () => {
    const [count, setCount] = useState(0);
    const [text, setText] = useState("");

    // 💡 Mount => 생성 시점 1회
    useEffect(() => {
        console.log("Mount!");
    },[]);
    
    return(
        <div style={{ padding: 20 }}>
            <div>
                {count} &nbsp;
                <button onClick={() => setCount(count + 1)}>+</button>
            </div>
            <div>
                <input value={text} onChange={(e) => setText(e.target.value)} />
            </div>
        </div>
    );
}

export default Lifecycle;

😮‍💨 Mount(탄생) 시점 결과

 

useEffect에 빈배열을 전달하게 되면 컴퍼넌트가 마운트(생성)된 시점에만 작동하기 때문에 업데이트가 되어도 콘솔에 추가로 찍히지 않는다.

 

💡 마운트된 시점에 무언가 하고 싶으면 useEffect에 빈배열을 전달해 준다음 콜백함수에 원하는 기능을 넣어주면 된다.

---

❤️‍🔥 Update 예제코드

import React,{useEffect,useState} from "react";

const Lifecycle = () => {
    const [count, setCount] = useState(0);
    const [text, setText] = useState("");

    // 💡 Update => 업데이트시 매번
    useEffect(() => {
        console.log("Update!");
    });
 
     // 🎈 dependency array 활용
     useEffect(() => {
        console.log(`count is update : ${count}`);
        if (count > 5) {
            alert("count가 5를 넘었습니다. 따라서 1로 초기화 합니다.");
            setCount(1);
        }
    }, [count]);
    
    // 🎈 dependency array 활용
    useEffect(() => {
        console.log(`count is update : ${text}`);
    }, [text]);
    
    return(
        <div style={{ padding: 20 }}>
            <div>
                {count} &nbsp;
                <button onClick={() => setCount(count + 1)}>+</button>
            </div>
            <div>
                <input value={text} onChange={(e) => setText(e.target.value)} />
            </div>
        </div>
    );
}

export default Lifecycle;

😮‍💨 Update(변화) 시점 결과

state가 변경되거나 부모가 받는 props가 바뀌거나 부모컴포넌트가 리렌더(업데이트)가 될때마다 반응한다.

 

💡 업데이트 마다 무언가 하고 싶으면 useEffect에 빈배열을 준다음 콜백함수에 원하는 기능을 넣어주면 된다.

 

---

😮‍💨 Update 결과 - dependency array 활용 1

버튼을 누르면 count만 글자를 입력하면 text만 반응한다.

 

💡 개별로 감지하고 싶으면 useEffect에 빈배열안에 체크할 값을 넣고 콜백함수에 원하는 기능을 넣어주면 된다.

 

---

😮‍💨 Update 결과 - dependency array 활용 2

5이상이 되었을때를 감지하여 다시 1로 바꾸어 준다.

 

💡 원하는 시점에 무언가 하고 싶으면 useEffect 배열에 체크할 값을 넣고 콜백함수에 원하는 기능을 넣어주면 된다.

---

❤️‍🔥 UnMount 예제코드

import React,{useEffect,useState} from "react";

const UnmountTest = () => {
    useEffect(() => {
        // 👉 Mount 시점에 실행됨 => ON
        console.log("Mount!");

        // 👉 UnMount하는법 => 콜백함수안에 함수를 리턴 시킴
        return () => {
            // 👉 UnMount 시점에 실행됨 => OFF
            console.log("UnMount!!");
        }
    }, []);

    return <div>Unmount Testing Component</div>
}

const Lifecycle = () => {
    const [isVisible, setIsVisible] = useState(false);
    const toggle = () => setIsVisible(!isVisible);

    return(
        <div style={{ padding: 20 }}>
            <button onClick={toggle}>ON/OFF</button>
            {isVisible && <UnmountTest/>} // 👉 단락회로평가 활용
        </div>
    );
}

export default Lifecycle;

😮‍💨 UnMount(죽음) 시점 결과

콜백함수안에 함수를 리턴해주면 UnMount시점에 체크가 된다.

 

💡 끝나는 시점에 무언가 하고 싶으면 useEffect 콜백함수안에 원하는 기능을 넣은 함수를 리턴해주면 된다.

---

Demo : winterlood - CodeSandBox