JS | 계산된 속성명 (computed property name)

계산된 속성명이란?

Javascript ES6부터 지원되는 속성으로, 객체 속성명을 동적으로 결정하는 것.
[ ] 안에 식을 넣고, 그 결과가 속성명으로 사용된다.
구조분해 할당과 세트로, React에서도 매우 유용히 활용된다.

하지만 구조분해 할당도 그렇고 계산된 속성명도 그렇고..
이름만 들으면 도통 감이 잘 오지 않는다. 실제 프로젝트를 진행하다 만난 코드로 정리해본다.

예시

React에서 API와 statename을 인자로 받는 함수 handleFetch를 통해

(1) API의 데이터를 json 형태로 가져오고
(2) 이 데이터를 인자 statename의 state에 저장하고 싶다고 하자.

우선 fetch 함수를 통해 API를 받아와 첫 번째 .then으로 json으로 넘겨주는 **(1)**까진 쉽다. 그럼 이제 **(2)** 차례. statename이란 state에 어떻게 데이터를 저장할까?

이 때 필요한게 바로 계산된 속성명 (computed property name)

객체의 속성명을 동적으로 결정할 땐 [ ] 안에 넣어, 계산된 속성명을 이용하자.
아래 코드와 같이 state객체의 속성명은 인자에 따라 동적으로 변경되므로, [ ] 안에 넣어 계산된 속성명을 사용한다.

 handleFetch = (API, statename) => {
    fetch(API)
      .then(res => res.json()) // (1)
      .then(data => {
        this.setState({
          [statename]: data.Result, // (2)
        });
      });
  };