useEffect

useEffect

1. useEffect

 - React 라이브러리에서 제공하는 훅(Hook) 중 하나

 - 함수형 컴포넌트에서 부작용(side effect)을 처리하기 위해 사용

    ※  여기서 부작용이란? 컴포넌트 외부와의 상호작용을 의미

 - useEffect를 사용 시, 컴포넌트가 렌더링되고 난 후, 특정 작업을 수행할 수 있음

 - 컴포넌트의 생명주기와 관련된 작업을 처리

    ※ 컴포넌트 생명주기 : 컴포넌트가 생성되고 소멸될 때까지의 과정

 - useEffect 함수는 두 개의 매개변수를 받음

    - 첫 번째 매개변수는 작업을 담은 콜백 함수 (컴포넌트가 렌더링될 때마다 실행됨)

    - 두 번째 매개변수는 의존성 배열(dependency array)로, 배열에 지정된 값이 변경될 때만 콜백 함수를 실행

 

2. 사용방법

 - Counter.js

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

const Counter = () => {
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");

  // 이름 입력 시, 업데이트
  const onChangeName = (e) => {
    setName(e.target.value);
  };

  const onChangeNickname = (e) => {
    setNickname(e.target.value);
  };

  useEffect(() => {
    // 렌더링이 잘 되었는지 확인
    console.log("렌더링이 완료되었습니다.");
    console.log({
      name,
      nickname,
    });
  });

  return (
    <>
      {/* 이름 입력 */}
      <div>
        <input value={name} onChange={onChangeName}></input>
        <input value={nickname} onChange={onChangeNickname}></input>
      </div>
    </>
  );
};

export default Counter;

 

 - App.js

import React from "react";
import Counter from "./Counter";

const App = () => {
  return (
    <>
      <Counter />
    </>
  );
};

export default App;

 

 - 결과 (두 번째 매개변수를 정의하지 않았을 경우, 값을 입력할 때마다 렌더링됨)

 

 - Counter.js 에서 useEffect에 두 번째 매개변수를 추가함

useEffect(() => {
  // 렌더링이 잘 되었는지 확인
  console.log("렌더링이 완료되었습니다.");
  console.log({
    name,
    nickname,
  });
}, [name]);

 

 - 결과 (두 번째 매개변수도 추가하여, name의 값만 변경 되었을 때 렌더링됨)