[React] useState 를 object 특정 값 변경에 사용하기

useState에 대해 간단한 활용법에 대해서만 배우고서는 사용하려니까 object 특정 값만 변경할때 문제가 생겼다.

도움을 받아서 해결하였다.

const [keyword, setKeyword] = useState([
    /label : 키워드 이름 select: 선택되었는지 여부/
    {key: index++, label: '랜덤', select: false},
    {key: index++, label: '자연', select: true},
    {key: index++, label: '건축', select: true},
    {key: index++, label: '예술', select: true},
    {key: index++, label: '뷰티', select: true},
    {key: index++, label: '교육', select: true},
    {key: index++, label: '테크', select: true},
  ]);
  const changeKeyword = e => {
    console.log(keyword[e.key]);
    setKeyword(prevState => ({
      ...prevState,
      [keyword[e.key].select]: true,
    }));
  };

처음에 하고 싶었던 것은 useState Hook을 이용해서 changeKeyword함수를 만들어 해당 select 값을 true로 바꾸어주고 싶었다.

 

아래는 수정 코드이다.

const [keyword, setKeyword] = useState([
    /*label : 키워드 이름 select: 선택되었는지 여부*/
    {key: index++, label: '랜덤', select: true},
    {key: index++, label: '자연', select: true},
    {key: index++, label: '건축', select: true},
    {key: index++, label: '예술', select: true},
    {key: index++, label: '뷰티', select: true},
    {key: index++, label: '교육', select: true},
    {key: index++, label: '테크', select: true},
  ]);
  /* 키워드 추가 */
  const changeKeyword = e => {
    let newKeywords = keyword.map(k => {
      if (k.key === e.key) {
        return {
          ...k,
          select: true,
        };
      } else {
        return k;
      }
    });
    setKeyword(newKeywords);
  };

자바스크립트 문법에 대해서 부족했었던것 같다.

 

위의 문법을 그래로 사용하여 키워드를 제거하는 함수도 만들어 주었다.

/* 키워드 삭제 */
  const remove = e => {
    console.log(e);
    let newKeywords = keyword.map(k => {
      if (k.label === e) {
        return {
          ...k,
          select: false,
        };
      } else {
        return k;
      }
    });
    setKeyword(newKeywords);
  };