React : useEffect

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

state가 변하는 Button을 일단 만들었다.

import { useState } from 'react';
function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log('I RUN ALL THE TIME');
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>클릭클릭</button>
    </div>
  );
}
export default App;

useState의 사용문법이 좀 다르지?
react를 install한 것이기 때문에 React.useState(init)문법을 사용하지 않고 바로 useState(init)를 사용할 수 있다. 본론으로 넘어가서 콘솔을 확인해보면...?
state가 변할 때 마다 콘솔이 찍히는 걸 볼 수 있다.
그런데 만약에 딱 한 번만 호출하고 싶을 때는 어떻게 해야할까?
예를 들면 api를 호출한다고 했을 때, 이 방식대로라면 state가 변할 때마다 api를 계속 호출해야한다. 그럴 필요가 있을까? (있을 수도 있겠지만!)

useEffect

useEffect
useState와 마찬가지로 React Hook의 일종이다. 두개의 argument(전달인자)를 가진다.

useEfect를 import하고 첫번째 argument에는 실행하고자 하는 함수를, 두번째 argument는 [대괄호]로 남겨둔 채로 실행해보자.

import { useState, useEffect } from 'react';
function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log('I RUN ALL THE TIME');
  const iRunOnlyOnce = () => {
    console.log('I RUN ONLY ONCE');
  };
  useEffect(iRunOnlyOnce, []);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>클릭클릭</button>
    </div>
  );
}
export default App;

그런데 불현듯 눈에 띈 저 애들은 대체 왜 저러는걸까?
답은 index.js에 있다.
root.render 함수에 <React.StrictMode>에 있다.
리엑트 공식문서를 보면 StrictMode는 버그를 찾기위해 Re-render를 한다고 적혀있다.
나는 엄격한 모드가 필요없는 상태이므로 과감히 지웠다.
한 번씩만 render 되는 것 확인!

다시 본론으로 돌아와서
useEffect사용해 봤으니까 저 아이가 어떤 기능을 하는지 확인해보자.

오, useEffect를 사용한 함수는 한 번만 실행된다.
그렇다면 useEffect의 두번째 argument는 어떤 기능을 가졌을까?

Magic of useEffect

useEffect는 state의 변화에 따라 함수가 실행되도록 돕는 reactHook이라고 생각된다.
아까 언급했듯이 useEffect는 두개의 전달인자를 갖는데 첫 번째 인자는 실행되는 함수. 두번째 인자는 함수가 실행되는 기준점. 즉, 의존값 이다.

  useEffect(() => {
    console.log('I RUN ONLY ONCE');
  }, []);

위 코드를 예시로 들자면, 첫 번째 인자는 console이고, 두 번째 인자(의존값)는 빈값이기 때문에 콘솔에 단 한 번만 출력이 된다. 의존값에 state를 넣으면 해당 state의 변화에 따라 console이 찍히게 되는 되는 아주 마법같은 결과를 볼 수 있다.

import { useState, useEffect } from 'react';
function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState('');
  const onClick = () => setValue((prev) => prev + 1);
  const onChange = (e) => setKeyword(e.target.value);
  
  //제한 사항이 없으므로 그 어떤 state가 변하든 영원히 출력된다.
  console.log('I RUN ALL THE TIME');
  
  useEffect(() => {
    //의존값이 빈값이므로 재실행 포인트가 없어서 단 한 번만 render.
    console.log('I RUN ONLY ONCE');
  }, []);
  
  useEffect(() => {
    //의존값 keyword가 변할 때마다 render.
    console.log('I RUN WHEN "KEYWORD" CHAGE');
  }, [keyword]);
  
  useEffect(() => {
    //의존값 counter 변할 때마다 render.
    console.log('I RUN WHEN "COUNTER" CHAGE');
  }, [counter]);
  
  useEffect(() => {
    // 의존값은 배열로 묶을 수도 있다.
    console.log('I RUN WHEN "KEYWORD & COUNTER" CHAGE');
  }, [keyword, counter]);
  return (
    <div>
      <input
        type={keyword}
        placeholder="searchHere"
        onChange={onChange}
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>클릭클릭</button>
    </div>
  );
}
export default App;

Clean-up Function

Clean-up Function
메모리 누수를 방지하고, 컴포넌트의 상태를 올바르게 유지하며, 필요 없어진 이벤트 핸들러를 제거하는데 필요한 함수

//문법
useEffect(() => {
    (이펙트 함수)
    return {
        (클린업 함수)
    };
}, [의존값]);

import하는 component가 한 개라면 크게 문제가 없겠지만 같은 컴포넌트를 여러번 호출할 경우 화면에서 컴포넌트를 지웠을 때(Destroy) useEffect로 설정된 sideEffect가 정리되지 않아 메모리 누수가 발생할 수 있다. 그것을 미연에 방지하기 위해 사용하는 것이 clean-up function이다.

//응용1
function Hello() {
  useEffect(() => {
    // 이펙트 함수
    console.log('CREATE');
    // 클린업 함수
    return () => console.log('DESTROY');
  }, []);
  return <h1>HELLO</h1>;
}

//응용2
function Hello() {
  const hiFunc = () => {
    console.log('CREATE');
    
    //클린업 함수
    return byeFunf;
  };
  const byeFunf = () => {
    console.log('DESTROY');
  };
  useEffect(hiFunc, []);
  return <h1>HELLO</h1>;
}

두개 모두 동일한 동작을 한다.

👉🏻React - useEffect 훅 (이펙트 함수, 클린업 함수)
👉🏻useEffect의 클린업의 필요성