useEffect

1. useEffect 더 알아보기 !

useEffect를 잘못 사용한 예시

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

const foo = () => {
  const [var, setVar] = useState(0);
  const [varB, setVarB] = useState(0);

    useEffect(() => {
      const timeout = setTimeout(() => {
        setVar(var + 1);
      }, 1000);
      const timeoutB = setTimeout(() => {
        setVarB(varB + 2);
      }, 1000);

      return () => {
        clearTimeout(timeout);
        clearTimeout(timeoutB);
      };
    }, [var, varB])

  return (
    <div>
      <h2>{`var : ${var}  varB : ${varB}`}</h2>
    </div>
  );
};

export default foo;

• 위에 코드는 하나의 의존성 배열안에 var와 varB 동시에 들어가 있기 때문에 구현하고자하는 의도와 다르게 훅이 동작할 수 있다.
• 리액트 훅을 사용할 때 복수의 useEffect 함수를 사용할 수 있지만 클린한 코드의 관점에서 함수는 한 가지 목적을 가지고 있어야 한다.
• useEffect를 단일 목적의 함수로 분리한다면 의도치 않는 부수 효과 함수의 실행을 방지할 수 있다.

클린하게 수정한 useEffect

const [var, setVar] = useState(0);
const [varB, setVarB] = useState(0);

useEffect(() => {
    const timeout = setTimeout(() => {
      setVarA(var + 1);
    }, 5000);

    return () => {
      clearTimeout(timeout);
    };
  }, [var]);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setVarB(varB + 1);
    }, 5000);
    return () => {
      clearTimeout(timeout);
    };
  }, [varB]);

• 각각 해당하는 useEffect를 작성하여 각각의 의존성 배열에 상태값 var와 varB를 넣어주는게 좋다고 생각한다.

커스텀 훅 만들어보기

import React from "react";
import useVarA from "./useVarA";
import useVarB from "./useVarB";

// App.js
export const App = () => {
  const [varA] = useVarA();
  const [varB] = useVarB();
  return (
    <div>
      <h2>{`varA : ${varA}  varB : ${varB}`}</h2>
    </div>
  );
};

// useVarA.js
const useVarA = () => {
  const [varA, setVarA] = useState(0);

  useEffect(() => {
    const timeout = setTimeout(() => setVarA(varA + 1), 1000);

    return () => clearTimeout(timeout);
  }, [varA]);

  return [varA, setVarA];
};

// useVarB.js

const useVarB = () => {
  const [varB, setVarB] = useState(0);

  useEffect(() => {
    const timeout = setTimeout(() => setVarB(varB + 1), 1000);

    return () => clearTimeout(timeout);
  }, [varB]);

  return [varB, setVarB];
};

• 두 상태 변수를 완전히 독립적으로 만들어주어 각 함수들이 어떤 변수를 사용하는지 쉽게 파악이 가능하다.