[JavaScript] 객체 리터럴 중복 허용 [6/1 study]

 

 

객체 리터럴 중복 허용

 

 

 

❗️상황

export default function ReviewForm() {
  const [values, setValues] = useState({
    title: "",
    rating: 0,
    content: "",
    imgFile: null,
  });

  const handleChange = (name, value) => {
    setValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };
  
  /.../

여기서 prevValues에는
{
    title: "",
    rating: 0,
    content: "",
    imgFile: null,
}
이 객체 리터럴이 들어갈 거고

[name]: value는 객체 리터럴 정의로 title, rating, content, imgFile중에 하나는
2개가 만들어 지지 않을까라는 생각이 문득 들었다

 

너무 쉽다면 쉬울 수 있지만 공부를 해보니

 

❗️결론

name이 "title"이고 value가 "New Title"이라고 가정해보면

{
  title: "New Title",
  rating: 0,
  content: "",
  imgFile: null,
}
결국 이렇게 됨

 

🔥마무리

객체 리터럴에서 동일한 속성이 두 번 정의되면, 나중에 정의된 속성이 이전 속성을 덮어씁니다.
따라서, setValues((prevValues) => ({ ...prevValues, [name]: value })) 코드는 name 속성의 값을 동적으로 업데이트하면서 이전 상태의 나머지 속성을 그대로 유지합니다. 이를 통해 상태 업데이트를 효율적으로 처리할 수 있습니다!
오늘도 화이팅!