안녕하세요. 이번시간에는 자바스크립트 ES6 문법인 Computed Property Name 라는 것에 대해 알아보겠습니다.
사실 이것은 React를 사용할때 많이 사용하던 문법이었는데, 그 문법이름이 computed property name이라는 것을 오늘 알았네요!!
리액트할때 onChange 이벤트시 state값에 키밸류값을 덮어씌울때 자주 사용하였는데요 코드로 살펴보겠습니다
const test1 = "aa";
const test2 = "bb";
//{aa:"bb",bb:"aa"}
console.log({[test1]:test2,[test2]:test1})위와 같이 대괄호[]를 사용하여 키값을 정할 수 있다는 것입니다.
[]안에 넣은 것에 대한 value값이 키 값으로 정해지게 되는 것이죠.
그래서 위 값은 test1의 값인 aa 가 키값이고 test2의 밸류 값인 bb인 형태로 키 밸류 값이 만들어 진것이죠.
또 제가 리액트에서 자주 사용하던 방식으로 덮어씌우기도 가능합니다.
const test = {
abc:"",
def:""
}
const a = "abc"
//{abc:"computed property",def:""}
console.log({...test,[a]:'computed property'})위 형태로 출력이 됩니다. [a]는 a의 값이 abc이므로 abc를 키값을 지니는데, abc라는 키값이 이미 존재하니 그걸 그것의 value값으로 덮어씌어버리는것이죠.
