Javascript Computed Property Name

리액트를 하다가 보면 아래의 문법을 본적이 있을 것이다.

const handleChange = e => {
  setState({
    [e.target.name]: e.target.value,
  })
};

지금까지 나는 해당 문법이 리액트의 문법인줄 알았으나, 찾아보니 ES6의 Computed Property Name임을 알게 되었다.

자바스크립트를 반년간 공부했음에도 엄청 잘 쓰이는 문법을 처음 알게 된 것이 부끄러웠으며, 다신 잊지 않고자 정리한다.

1. 문법 설명

Computed Property Name은 객체의 프로퍼티 key를 문자열로 변환할 수 있는 표현식을 사용해(변수, 함수 등) 동적으로 지정하는 문법이다.

이를 통해 객체 리터럴 내부에서 Computed Property Name으로 프로퍼티 키를 동적으로 생성할 수 있다.
프로퍼티 키로 사용할 표현식을 대괄호([])로 묶어야 한다.

const prefix = 'prop';
let i = 0;

const obj = {
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i
};

console.log(obj); // { 'prop-1': 1, 'prop-2': 2, 'prop-3': 3 }

2. 사용 사례 (리액트)

export default function Input() {
  const [state, setState] = useState({
    id: '',
    password: '',
  })

  const handleChange = e => {
    setState({
      [e.target.name]: e.target.value,
    })
  };

  return (
    <React.Fragment>
      <input value={state.id} onChange={handleChange} name="name" />
      <input value={state.password} onChange={handleChange} name="password" />
    </React.Fragment>
  )
}

위의 코드는 id, password 입력창 컴포넌트이다.
Computed Property Name을 통해 onChange 이벤트가 걸린 입력창의 name을 동적으로 받아 value를 수정할 수 있다.

(docs)

1. 모던 자바스크립트 Deep Dive 10강 객체리터럴
2. 클린코드 자바스크립트 인강 Section 7