React Lifecycle 제어 - useEffect

탄생 - 변화 - 죽음으로 나뉜다

컴포넌트가 탄생하고 변화하고 사라지는 순간에 우리가 각각 어떤 작업을 수행시킬 수 있다는 것을 라이프 사이클을 제어한다라고 할 수 있다.

• 탄생 : 화면에 나타나는 것 Mount / ComponentDidMount
• 변화 : 업데이트 (리렌더) Update / ComponentDidUpdate
• 죽음 : 화면에서 사라짐 UnMount / ComponentWillUnmount

위의 메서드들은 클래스형 컴포넌트에서밖에 사용할 수 없다.

지금까지는 컴포넌트를 화살표 함수를 통해서 함수형으로 제작을 해 왔고 이것들은 함수형 컴포넌트로 분류하기 때문에 위 메서드들을 사용할 수 없다. 또한 상태를 관리하는 state도 클래스형 컴포넌트만 이용할 수 있는 기능이어서 사용할 수 없다. => 리액트 훅

=> state같은 기능은 함수형 컴포넌트가 사용할 수 없지만 React Hooks는 use 키워드를 붙여 함수처럼 불러와 사용할 수 있게 된 것.
" 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 낚아채듯이 훔쳐와 사용할 수 있다."

리액트의 함수형 컴포넌트에서 라이프 사이클을 제어하기 위해선 useEffect 라는 리액트 훅을 사용한다.

import React, { useEffect } from "react";

useEffect(()=>{
	// todo => callback 함수
}, []); 

=> 첫 번째 파라미터는 콜백 함수를 전달하고, 두 번째 파라미터는 Depth(의존성 배열)을 전달해줘야 한다. 배열 내에 든 값이 변화하면 콜백함수가 수행되는 방식이다.

useEffect

컴포넌트가 mount or unmount or update 되었을 때 특정 작업을 처리할 수 있다. useEffect는 클래스형 컴포넌트의 길어지는 코드 길이와 중복된 코드 및 가독성 문제를 해결한다.

마운트된 시점에 useEffect 기능 활용하기

import { useEffect, useState } from "react";

const Lifecycle = () => {

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

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

export default Lifecycle;

앱 컴포넌트 하위 태그로 위의 Lifecycle.js 파일을 넣은 상태고 useEffect 기능을 사용해봤다. 렌더링 시 컴포넌트가 마운트 된 시점에 콘솔에 수행되는 것을 확인할 수 있었다. 정말로 마운트 된 시점에만 useEffect의 콜백함수가 수행되는지 확인해보기 위해 +버튼을 눌러봤는데 콘솔에 아무것도 출력되지 않았다.

state 업데이트 되는 순간을 useEffect로 제어하기

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

컴포넌트가 업데이트 될 때 하고 싶은 것이 있다면 빈 배열을 전달하지 않으면 된다! 이제 버튼을 누를때마다 콘솔에 "update!" 가 출력되는 걸 볼 수 있다.

Dependency Array란?

 useEffect(()=>{
        console.log("Update!");
    },[count]);

dependency array에 있는 값이 변하면 그 순간 콜백함수가 수행된다고 했다. 이번엔 빈 배열에 count를 넣고 어떨 때 콘솔에 출력이 되는지 확인해봤는데 역시나 count 의 state값이 변할 때 출력되었다.

Dependency Array를 활용하면 감지하고 싶은 것만 감지할 수 있다