[React] 기존 값은 유지하면서 특정 값만 바꾸려고 하는 경우(useState, produce)

React에서 useState를 produce를 사용하여 특정 값만 변경하고 나머지 값은 유지하려면 produce를 사용하여 기존 상태를 복사하고 변경하려는 특정 필드만 업데이트할 수 있습니다. produce는 상태를 불변으로 유지하면서도 변경할 수 있게 해주는 Immer 라이브러리의 함수입니다.

import { useState } from 'react';
import produce from 'immer';

function MyComponent() {
  const [state, setState] = useState({
    name: 'Alice',
    age: 25,
    city: 'New York',
  });

  const updateCity = (newCity) => {
    setState(produce(draft => {
      draft.city = newCity; // 기존의 name, age는 유지하면서 city만 변경
    }));
  };

  return (
    <div>
      <p>Name: {state.name}</p>
      <p>Age: {state.age}</p>
      <p>City: {state.city}</p>
      <button onClick={() => updateCity('San Francisco')}>Change City</button>
    </div>
  );
}

 

이 예제에서 setState를 호출할 때 produce 함수로 기존 state의 복사본을 만들고, 그 복사본(draft)에서 city 값만 변경했습니다. 이렇게 하면 name과 age 값은 유지되고, city만 새로운 값으로 업데이트됩니다.

중요한 점

produce는 기존 상태를 복사하고 원하는 부분만 변경하므로, 불필요한 상태 변경을 방지하고 효율적으로 상태를 관리할 수 있습니다. immer는 내부적으로 proxy를 사용하여 불변성을 유지하면서도 직관적인 코드 작성을 가능하게 해줍니다.

 

const [newState, setNewState] =useState({});
newState에 state값을 전부다 넣고 city값만 변경하고 싶은 경우

 

newState에 기존 state 값을 모두 포함하고 city 값만 변경하려면 다음과 같이 produce와 setNewState를 사용할 수 있습니다.

import { useState } from 'react';
import produce from 'immer';

function MyComponent() {
  const [state, setState] = useState({
    name: 'Alice',
    age: 25,
    city: 'New York',
  });

  const [newState, setNewState] = useState({});

  const updateCityInNewState = (newCity) => {
    setNewState(produce(state, draft => {
      draft.city = newCity;  // 기존 state 값은 유지하고 city 값만 변경
    }));
  };

  return (
    <div>
      <p>Name: {newState.name || state.name}</p>
      <p>Age: {newState.age || state.age}</p>
      <p>City: {newState.city || state.city}</p>
      <button onClick={() => updateCityInNewState('San Francisco')}>Change City in NewState</button>
    </div>
  );
}

 

이 코드에서는 produce를 사용하여 기존의 state 객체를 복사하고, city 값만 변경하여 newState에 설정합니다. produce(state, draft => { draft.city = newCity; }) 구문에서 state가 기본 상태로 복사되고, city 값만 새 값으로 덮어씌워집니다.

이 방법은 newState를 기존 state와 동일한 구조로 설정하면서 특정 값만 업데이트하고자 할 때 유용합니다.