React UseEffect 모범 사례

이 게시물에서는 useEffect의 다양한 사례를 볼 것입니다.

먼저 종속성이 없는 useEffect를 살펴보겠습니다.

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [name, setName] = useState("");
  const [dark, setDark] = useState(false);

  const age = 23
  const user = { name, age };

  const buttonStyle = {
    backgroundColor: dark && "#000",
    color: dark && "#FFF"
  };

  const handleName = (e) => {
    setName(e.target.value);
  };

  const handleClick = () => {
    setDark((currDark) => !currDark);
  };

  useEffect(() => {
    console.log(user);
  });

  return (
    <div className="App">
      <input value={name} onChange={handleName} />
      <button style={buttonStyle} onClick={handleClick}>
        Toggle Theme
      </button>
    </div>
  );
}

이 코드에서 상태가 변경되면 다시 렌더링되고 useEffect가 반복해서 실행되므로 코드가 실행될 때 콘솔에서 결과를 확인하겠습니다.



둘째, 종속성 배열이 있는 useEffect를 살펴보겠습니다.

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [name, setName] = useState("");
  const [dark, setDark] = useState(false);

  const age = 23
  const user = { name, age };

  const buttonStyle = {
    backgroundColor: dark && "#000",
    color: dark && "#FFF"
  };

  const handleName = (e) => {
    setName(e.target.value);
  };

  const handleClick = () => {
    setDark((currDark) => !currDark);
  };

  useEffect(() => {
    console.log(user);
  } , [user]);

  return (
    <div className="App">
      <input value={name} onChange={handleName} />
      <button style={buttonStyle} onClick={handleClick}>
        Toggle Theme
      </button>
    </div>
  );
}

이 코드에서 useEffect는 사용자가 변경될 때 실행됩니다. 이제 사용자가 객체이고 모든 다시 렌더링 사용자 객체가 서로 다른 참조를 갖는다는 것을 알 수 있습니다. 버튼을 클릭하면 효과가 실행되는 것을 볼 수 있습니다 !!!!!!!!!
우리는 효과를 사용자 개체에만 의존하게 하지만 왜 버튼을 클릭할 때 효과가 발생하는지, 일반은 사용자 개체 값이 변경될 때만 효과가 발생하는지에 대한 답은 버튼을 클릭했을 때 효과가 실행되는 이유는 다른 참조가 있기 때문입니다. 물체.

이 코드의 결과를 보자.


이 문제를 해결하기 위해 useEffect의 종속성 배열을 [name , age]로 대체할 수 있습니다. 그런 다음 이제 사용자 객체의 다른 참조를 피했습니다.

그럼 이제 결과를 보자



그게 지금 우리에게 필요한거야



동일한 결과에 대한 대안 솔루션으로 사용자 개체를 종속성으로 유지하고 이 코드와 같은 사용자 개체에 useMemo()를 사용할 수 있습니다.

import { useEffect, useMemo, useState } from "react";
import "./styles.css";

export default function App() {
  const age = 23;
  const [name, setName] = useState("");
  const [dark, setDark] = useState(false);

  const user = useMemo(() => {
    return { name, age };
  }, [name, age]);

  const buttonStyle = {
    backgroundColor: dark && "#000",
    color: dark && "#FFF"
  };

  const handleName = (e) => {
    setName(e.target.value);
  };

  const handleClick = () => {
    setDark((currDark) => !currDark);
  };

  useEffect(() => {
    console.log(user);
  }, [user]);

  return (
    <div className="App">
      <input value={name} onChange={handleName} />
      <button style={buttonStyle} onClick={handleClick}>
        Toggle Theme
      </button>
    </div>
  );
}

useMemo()를 사용하면 이름이나 연령이 변경된 경우에만 사용자 개체 참조가 변경되고 useEffect는 이름이나 연령이 변경된 경우에만 실행됩니다.