(React) useState 배열, 객체 업데이트 패턴 정리

 

 

useState를 사용해 상태 변수(state)와 상태를 변경하는 함수(setState)를 생성할 때, 

 

원시 타입(primitive type)이 아닌 객체나 배열을 사용해야 할 때가 있다.

문제는 객체나 배열은 원시 타입과 다르게 참조에 의해 할당되거나 복사되므로, React가 객체 변경을 감지할 수 없다는 것이다.

 

객체는 메모리 주소를 가지므로 내용이 변경되어도 참조 값은 변하지 않기 때문이다.

따라서 useState로 객체를 업데이트할 때는 스프레드 연산자(...)를 사용해 새로운 객체를 만들어 반환해야 한다.

 

이번 포스팅에서는 useState로 객체를 업데이트할 때 사용할 수 있는 패턴을 정리하고자 한다.

 

 

 

1. 배열/객체에 새로운 요소를 추가해야 할 때

배열/객체를 상태 변수(state)로 만들고, 여기에 새로운 요소를 추가할 때는 스프레드 연산자(...)를 사용한다.

 

스프레드 연산자를 사용해 기존 배열/객체를 복사하고 뒤에는 추가해야 할 새로운 요소를 넣어 반환한다.

 

그러면 새로운 요소가 추가된 새로운 배열/객체가 업데이트된다.

 

 

 

2. 배열/객체에 특정 요소를 제거해야 할 때

특정 요소를 찾아내 제거를 해야 할 때는 내장 메서드인 filter을 사용해,

 

 제거해야 할 요소의 조건을 걸러낸 뒤, 업데이트하면 된다.

 

 

 

사용 예시

import { useState } from "react";

function Emoji() {
  const [emoijList, setEmojiList] = useState(["🍒", "🍒", "🍒"]);

  //스프레드 연산자를 활용해 새로운 요소 추가 
  const addFruit = () => {
    setEmojiList((list) => [...list, "🍒"]);
  };

  //filter을 활용해 특정 요소 제거
  const removeFruit = () => {
    setEmojiList((list) => list.filter((_, idx) => idx !== list.length - 1));
  };

  return (
    <>
      <h2>{emoijList}</h2>
      <button onClick={addFruit}>add fruit</button>
      <button onClick={removeFruit}>remove fruit</button>
    </>
  );
}
export default Emoji;