[React] 객체 key에 접근

useState로 객체인 상태를 관리를 하던 중, 상태를 업데이트를 할 경우

key를 동적으로 받으려는 코드를 작성하려고 하다가 막혀 정리한다.

 

  const [filters, setFilters] = useState({
    brightness: 100,
    contrast: 100,
    saturate: 100,
    grayscale: 0,
    invert: 0,
    huerotate: 0,
    blur: 0,
    sepia: 0,
  });

위의 코드처럼 객체를 상태 관리 하려고 한다.

이때 하나의 속성 값이 바뀔경우 이 객체의 상태를 업데이트하는 하나의 함수를 작성하려고 한다.

그러면 이전 상태를 받아 그대로 전개하고 바뀐 속성을 찾아 업데이트를 해주면 된다.

이때 바뀐 속성의 key를 찾는 방법으로 대괄호([])을 이용하면 객체의 key에 접근을 할 수 있었다.

 

 const UpdateFilter = () => {
    setFilters((prev) => {
      return { ...prev, [filter]: filterRef.current.value };
    });
  };

 

+

 

객체의 key의 이름과 개수에 따른 컴포넌트를 반복 출력해야 할 때 Object.keys()를 이용하면 된다.

Object.keys(filters).map()