useEffect 훅

의존성 배열

 

 

의존성 배열(dependency array)은 React의 useEffect 훅에서 사용되는 개념으로, 해당 훅의 실행을 언제 트리거할 것인지를 결정합니다. 좀 더 간단하게 설명하면, 의존성 배열에 들어 있는 값들이 변화할 때마다 useEffect에 전달된 함수가 실행됩니다.

예를 들어, 다음과 같은 코드가 있다고 가정해봅시다:


useEffect(() => {
  // 부수 효과 코드
}, [dependency1, dependency2]);

 

dependency1과 dependency2는 의존성 배열에 있는 값들입니다.
의존성 배열 안의 값들이 변할 때마다, useEffect에 전달된 함수가 실행됩니다.
의존성 배열이 빈 배열([])인 경우, useEffect는 컴포넌트가 처음 마운트될 때 한 번만 실행되며, 이후에는 변화하지 않습니다.

이러한 의존성 배열을 사용하면, 특정 상태나 프로퍼티의 변화에 따라 부수 효과 함수를 실행할 수 있습니다. 예를 들어, 상태 값이 변경될 때마다 API를 호출하거나 화면을 갱신하는 등의 작업을 수행할 수 있습니다.

 

Test.js 

 

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

function ExampleComponent() {

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

  useEffect(() => {

    console.log('count 값이 변경될 때마다 실행됨');

  }, [count]); // count가 의존성 배열에 있으므로 count 값이 변경될 때만 실행됨

  return (

 

    <div>

      <p>Count: {count}</p>

      <button onClick={() => setCount(count + 1)}>증가</button>

    </div>

  );

}

export default ExampleComponent;

 

App.js

import { useState } from "react";

import "./App.css";

import PaymentForm from "./components/PaymentForm/PaymentForm";

import Expenses from "./components/Payments/Expenses";

import ExampleComponent from "./components/Payments/Test"

function App() {

  const [expenses, setExpenses] = useState([

    {

      id: "e1",

      title: "수건",

      amount: 12.33,

      date: new Date(2025, 8, 14),

    },

  ]);

  const getPaymentFormData = (data) => {

    console.log(data);

    setExpenses([

      {

        id: Math.random().toString(),

        title: data.name,

        amount: data.price,

        date: new Date(data.today),

      },

      ...expenses

    ]);

  };

  const deleteExpenseItem = (index) => {

    //확인용

    //console.log(id);

    //1. filter

    // const newFilteredArray = expenses.filter((item) => item.id !== id);

    // setExpenses(newFilteredArray);

    //2.slice

    const beforeArray = expenses.slice(0, index);

    const afterArray = expenses.slice(index+1); //끝까지는 콤마해서 또 적는 거 뒤에 생략해도된다함.

    setExpenses([...beforeArray, ...afterArray]);

  }

  return (

    <>

      <PaymentForm getPaymentFormData={getPaymentFormData} />

      <Expenses items={expenses} deleteExpenseItem={deleteExpenseItem}/>

      <ExampleComponent/>

    </>

  );

}

export default App;

 

이 [count] 의존성 배열 때문에

 

위 예시에서 useEffect는 count가 변경될 때만 실행됩니다. 즉, "증가" 버튼을 클릭할 때마다 count 값이 변경되고, 그 때마다 부수 효과 함수가 실행되어 로그가 출력됩니다.