[React/리액트] 객체(배열)를 복사하고 부분만 업데이트하기

스프레드 연산을 통한 복사

const obj = {
  name: '',
  age: 0,
  color: '',
};

const copy = { ...obj };

 

값을 추가하거나 수정할 수도 있다. 

 

const copy = { ...obj, name: 'p1su' }; //수정
const copy1 = { ...obj, id: 12 } //추가

 

useState를 통해 객체값 업데이트하기

위 스프레드 연산을 통한 객체를 다루는 방법을 사용하여 state값을 적절히 변경 후 렌더링할 수 있다. 

 

  const newValue = {
    id : 12,
    gender : 'boy',
  };

  const [values, setValues] = useState(obj);

  const handleClick = () => {
    setValues(newValue);
  };

당연하게도 해당 코드는 values의 값이 newValue 값으로 덮어 씌워진다. 

 

setValues((prevState) => ({
  ...prevState,
  ...newValue,
}));

setter 함수 부분을 다음과 같이 콜백함수 형식으로 바꿔주고, 스프레드 연산을 사용하면 원본을 유지하며 객체를 업데이트할 수 있다. 

 

해당 콜백함수는 이전 값을 인자로 받아 새로운 값을 리턴하는 구조이다.