내가 Object의 사용하는 이유를 알게 된 계기

리액트에서 Category를 구현하던 중 나는 한가지 문제에 직시하게 된다.
처음에 나는 categorise라는 배열에다가 내가 선택한 Category값들을 하나하나 넣어서 결과를 얻어낼려고 할려고 하였다.
그렇게 되면 하나의 문제가 발생하게 된다.

내가 구현하고 있는 카테고리는 이렇게 생겼다

이때 만약 사용자가
categorise : ["해운대구", "국립", "특목고", "남여공학"]
으로 선택한 카테고리를 다시 변경할 일이 없다고 단언하기는 어렵다.
나는 분명 처음에 배열에 값을 하나씩 저장시켜서 그걸 파라미터로 보내기로 했는데 그렇게 될 경우 만약 사용자가 남여공학이 아닌 남고로 변경할 경우

categorise : ["해운대구", "국립", "특목고", "남여공학", "남고"]
이런식으로 데이터가 쌓이는것이 아닌가! (난 왜 이 문제점을 생각을 못했지)

그래서 이를 해결하기 위해서 찾아보니 배열로 저장하는것이 아닌 객체(Object)로 저장을 해야한다고 깨달았다.

Object란?

간단하게 말하면 object는 키-값의 쌍을 가지고 있는 데이터구조이다.

---

그래서 나는 카테고리를 구현할 때 Object로 값을 저장하는것으로 코드를 변경하였다.

const handleClick = useCallback(
    (text: string, key: "institution" | "schoolType" | "manOrWoman") => {
      setCategory((prevCategory: any) => {
        return {
          ...prevCategory,
          [key]: text,
        };
      });
    },
    [setCategory]
  );

이렇게 하니 내가 원하던 대로 기능구현이 되었다.

해당 key에 맞는 값들이 잘 변하는걸 볼 수 있다.