React Hooks - useEffect

 useEffect는 리액트의 라이프사이클을 제어하는 메서드를 가져올 수 있는 기능을 가진 Hook으로, 어떤 상태값이 바뀌었을 때 동작하는 함수를 작성할 수 있다.

// useEffect 문법

import { useEffect } from "react";

useEffect(() => {
  // 1. Callback 함수
}, []); // 2. Dependency Array(의존성 배열)

 

• Callback 함수 첫번째 매개변수로 함수가 들어간다.

  → 함수가 호출된 타이밍은 렌더링 결과가 실제 돔에 반영된 직후이다.

 

• useEffect 두번째 매개변수

// 1. 두번째 매개변수로 아무것도 전달하지 않으면 화면이 리렌더링 될때마다 매번 실행된다.
useEffect(() => {
   console.log("change")
})

// 2. 두번째 매개변수로 빈 배열을 전달하면 상태값과 무관하게 렌더링 직후 딱 한번만 실행된다.
useEffect(() => {
   console.log("change")
}, [])

// 3. 두번째 매개변수로 배열을 전달하면 이는 의존성 배열이라고 하며, 
// 처음 컴포넌트가 렌더링 되고 난 후와
// 의존성 배열의 값(count)이 변경될 때 useEffect가 실행된다.
useEffect(() => {
   console.log("change")
}, [count])

 

📌 Side Effect와 Pure Function

 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 Side Effect가 있다고 말한다.

 Pure Function(순수함수)는 오직 함수의 입력(매개변수)만이 함수의 결과에 영향을 주는 함수로, 입력으로 전달된 값을 수정하지 않는다. 순수 함수에는 네트워크 요청과 같은 Side Effect가 없으며, 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장하기 때문에 예측 가능한 함수이다.

 

 → React의 함수 컴포넌트는 props가 입력으로, JSX Element가 출력으로 나가는 순수 함수이다. 하지만 AJAX 요청이 필요하거나, fetch API, LocalStorage 또는 타이머과 같은 React와 상관없는 API를 사용하는 경우 Side Effect가 생긴다.

 Effect Hook은 이런 Side Effect를 다루기 위한 Hook이다.

 

 

 👾 useEffect 예제

 👩🏻‍💻 useEffect 두번째 매개변수 전달 예제

import { useState, useEffect } from "react";

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

  // 최초 렌더링시 한번만 실행
  useEffect(() => {
    console.log("Mount!");
  }, []);

  // 화면이 리렌더링 될때마다 실행
  useEffect(() => {
    console.log("Update!");
  });

  // count가 변경되면 실행
  useEffect(() => {
    console.log(`count is updated : ${count}`);
  }, [count]);

  // text가 변경되면 실행
  useEffect(() => {
    console.log(`text is updated: ${text}`);
  }, [text]);

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

export default Lifecycle;

 

 👩🏻‍💻 useEffect 의존성 배열

useEffect(() => {
  fetch(`http://서버주소/words?day=${day}`)
    .then(res => res.json())
    .then((data) => {
      setWords(data)
  })
}, [day]) 
/* 
  useEffect 내부에서 특정값(day)을 사용하면 의존성 배열에 입력하라는 경고가 뜬다. 
  → 빈 배열이면 day가 변경되어도 새로운 정보를 가져올 수 없게 된다.
  → 의존성 배열에 day를 넣어주면 최신값을 보장받을 수 있다.
*/

 

---

✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

💬 조금 더 정리하고 싶은 내용들이 있는데, 아직 이해가 잘 안되는 부분이 있어 더 공부하고 수정할 예정입니다 :)

읽어주셔서 감사합니다 😊