의존성 배열에 들어갈 값

4. 의존성 배열에 포함해야 할 것들

 

 

 

• 변경될 수 있는 값: 의존성 배열에는 변경될 수 있는 값(예: props, 상태 등)을 포함해야 합니다. 예를 들어, onConfirm과 같은 함수는 부모 컴포넌트에서 정의되며, 이 함수가 변경될 수 있으므로 의존성 배열에 포함해야 합니다.

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

function App() {
  const [pickedPlaces, setPickedPlaces] = useState([]);

  useEffect(() => {
    // 이곳에서 pickedPlaces의 변경에 따라 어떤 작업을 수행할 수 있습니다.
    console.log('pickedPlaces가 변경되었습니다:', pickedPlaces);
  }, [pickedPlaces]); // pickedPlaces를 의존성 배열에 포함

  const handleAddPlace = (newPlace) => {
    setPickedPlaces((prev) => [...prev, newPlace]); // 상태 업데이트
  };

  return (
    <div>
      <button onClick={() => handleAddPlace('New Place')}>장소 추가</button>
    </div>
  );
}

useEffect안에서 setPickedPlaces같은 것들이 쓰이더라도 

setPickedPlaces같은 것들은 항상 동일한 참조를 유지 하기 때문에 의존성 배열에 넣지 않아도 된다.