객체 리터럴 사용시 이건 왜?

❔왜죠 왜 대괄호 쓰죠

react 프로젝트를 하면서 객체 리터럴을 사용해서 작업할 때, key 값을 왜 대괄호에 담는지 궁금했다!

const [state, setState] = useState({
    author: "",
    content: "",
  });
  const handleChangeState = (e) => {
    setState({...state,
            [e.target.name] : e.target.value   
    })
  }

저 handleChangeState 함수에서 setState modifier함수에게 값을 줄 때, 객체로 넘겨주기 위해 {} 객체 리터럴을 사용했음. 그런데 이때 e.target.name(=이벤트 발생한 객체의 name값 / 나는 이벤트가 발생하는 각 태그들에 name 속성을 줬음)을 객체의 key 값으로 넘기려고 했는데 대괄호 없이 쓰니까 빨간줄 (문법 에러) 표시가 나왔다. 즉 저걸 변수 그 잡채로 인식을 못한다는건데!

이렇게 변수에 담긴 문자열을 key로 활용하려면 반드시 대괄호에 담아서 사용해야 한다고 한다.

이유

객체 리터럴을 이용해 객체를 만들 때 변수에 담긴 문자열을 key로 활용하려면 반드시 대괄호에 담아 사용해야 합니다.
그렇지 않으면 아래 코드처럼 변수의 값으로 인지못함

let name = "지수";
let obj = {
  name : name
}
console.log(obj); // { name : 지수 }

위 코드에서 obj의 key로 설정한 name은 name 변수에 담긴 문자열인 "지수"가 아닌 name 자체가 key값이 됨

let name = "지수";
let obj = {
  [name] : name
}
console.log(obj);
// 출력 : { 지수 : 지수 }

하지만 대괄호 사용하면 변수 값 제대로 사용할 수 있음

결론

객체 리터럴 사용해서 변수의 값으로 key 값 줄때, []로 표기해서 이것이 변수에 저장된 값을 key로 사용할 것임을 알리자!