React useState() Object 내부 값 변경

REACT

 

React Hooks 기반

const [infoData, setInfoData] = useState({
    major: {
      name: "John Doe",
      age: "24",
      sex: "M",
    },

    minor:{
      id: 4,
      collegeRegion: "south",

    }

  });

위와 같은 설정일 때,

setInfoData((prevState) => ({
      ...prevState,
      major: {
        ...prevState.major,
        name: "Tan Long",
      }
    }));

이렇게 변경합니다.
prevState 를 파라미터로,
...prevState 로 이전 오브젝트 데이터를 복사해오고,
그 외에 새로운 값을 추가/변경 합니다. (=덮어 씌웁니다)

 

출처 : javascript - React Hooks useState() with Object - Stack Overflow

 

불변성 원칙 때문에 직접 바꿀 수 없기 때문에, 

새로운 오브젝트를 만들되, 그 안에 값을 추가해서 만드는 방식입니다.

 

같은 방식으로 다른 Type의 객체 / 함수에 적용해볼 수 있습니다. 

 

 

 

 

도움이 되셨다면 ♡공감 ↓광고클릭으로 저를 응원해주세요!!! :D