💻 코딩 일기 : [React] 'useEffect' 편

🔔'useEffect'에 대해서 알아보자!

💟 useEffect( )

useEffect : 특정 순간에 실행되는 메소드를 파라미터로 받습니다. 예를 들어 Initial Rendering(트리에 붙을 때, mount)될 때, Re-Rendering될 때, 컴포넌트가 트리에서 떨어질 때(unmount), 어떤 state가 바뀔 때(dependency 변경)에 사용합니다.

• 첫 번째 파라미터 : 부수 효과를 포함한 메소드입니다.
• 두 번째 파라미터 : dependency (특정 순간), dependency 배열에 포함된 상태나 props 중 하나라도 변경될 때마다 메소드가 실행됩니다.

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

function MyComp() {
  // 특정 순간에 실행되는 메소드를 파라미터로 받음
  useEffect(() => {
    console.log("re rendering 될 때마다 실행");
  });

  // 두 번째 파라미터 빈 배열
  useEffect(() => {
    console.log("첫 렌더링 때만 실행되는 메소드");
  }, []);

  // 첫번째 파라미터(함수)의 리턴은 unmount될 때 실행
  useEffect(() => {
    return () => {
      console.log("언마운트 될 때 실행되는 메소드");
    };
  }, []);

  // 두 번째 파라미터(배열)의 원소
  // 어떤 값(주로 state, dependency)이 바뀔 때,
  const [text1, setText1] = useState("");
  const [text2, setText2] = useState("");
  useEffect(() => {
    console.log("dependency text1이 바뀔 때");
  }, [text1]);
  useEffect(() => {
    console.log("dependency text2이 바뀔 때");
  }, [text2]);
  useEffect(() => {
    console.log("text1 text2가 바뀔 때");
  }, [text1, text2]);

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

  return (
    <div>
      hello comp
      <button onClick={() => setCount(count + 1)}>CLICK</button>
      <div>
        <input type="text" onChange={(e) => setText1(e.target.value)} />
      </div>
      <div>
        <input type="text" onChange={(e) => setText2(e.target.value)} />
      </div>
    </div>
  );
}

function App(props) {
  const [show, setShow] = useState(true);

  return (
    <div>
      <input
        type="checkbox"
        checked={show}
        onChange={(e) => setShow(e.target.checked)}
      />
      {show && <MyComp />}
    </div>
  );
}

export default App;

1. Re-rendering 될 때마다 실행되는 useEffect: 첫 번째 useEffect는 의존성 배열을 전달하지 않았으므로 컴포넌트가 re-rendering 될 때마다 실행됩니다. 이 때문에 버튼을 클릭하여 상태를 변경할 때마다 콘솔에 "re rendering 될 때마다 실행"이 출력됩니다.

2. 첫 렌더링 때만 실행되는 useEffect: 두 번째 useEffect는 빈 배열을 의존성 배열로 전달하여, 해당 컴포넌트가 처음 렌더링될 때만 실행됩니다. 따라서 페이지가 처음 로드될 때 콘솔에 "첫 렌더링 때만 실행되는 메소드"가 출력됩니다.

3. Unmount 될 때 실행되는 useEffect: 세 번째 useEffect는 함수를 반환하여 컴포넌트가 언마운트될 때 실행됩니다. 첫 번째 렌더링 시에만 존재하는 MyComp 컴포넌트가 화면에서 사라질 때 콘솔에 "언마운트 될 때 실행되는 메소드"가 출력됩니다.

4. Dependency에 따라 실행되는 useEffect: text1과 text2 상태가 변경될 때 각각의 useEffect가 실행됩니다. 또한 text1과 text2 상태가 변경될 때마다 실행되는 useEffect도 있습니다. 따라서 각 input 요소에 텍스트를 입력할 때마다 콘솔에 해당하는 문구가 출력됩니다. 마지막으로 text1과 text2 둘 다 변경될 때마다 실행되는 useEffect도 있으므로, 두 input 요소에 텍스트를 입력할 때마다 "text1 text2가 바뀔 때"가 출력됩니다.

---

📢 주의할 점 : useEffect 내에서 dependency가 변경될 수 없습니다.

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

function App(props) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("mount 될 때");
  }, []);

  useEffect(() => {
    console.log("count가 변경 될 때");
    // dependency가 변경되지 않도록 주의
    // setCount(count + 1); 변경하는 함수 작성 불가능
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>click</button>
    </div>
  );
}

export default App;

1. 첫 번째 useEffect:

   • 빈 배열 []을 의존성 배열로 전달하였으므로, 이 useEffect는 컴포넌트가 처음 마운트될 때 한 번만 실행됩니다.
   • 따라서 페이지가 처음 로드될 때 콘솔에 "mount 될 때"가 출력됩니다.

2. 두 번째 useEffect:

   • [count]를 의존성 배열로 전달하여, count 상태가 변경될 때마다 실행됩니다. 버튼을 클릭하여 count 상태가 변경될 때마다 콘솔에 "count가 변경 될 때"가 출력됩니다.
   • 주의할 점은 이 useEffect 내에서 setCount(count + 1)과 같이 count를 변경하는 코드를 작성할 수 없다는 것입니다. 왜냐하면 setCount 함수 호출은 상태를 변경하고, 그 결과로 컴포넌트를 re-render하기 때문에 무한 루프에 빠질 수 있습니다.