계산된 속성명

계산된 속성명이란 ES6 부터 지원되는 기능으로, 객체의 속성명이 최초에 결정되는 것이 아니라 동적으로 결정되는 것을 말한다. 이를 사용하는 경우에는 dot notation이 아니라 [] 을 사용한다.

사용하는 이유?

계산된 속성명은 주로 비슷한 동작을 줄일 때 사용할 수 있다. 1차 프로젝트를 진행하면서 상품 리스트 페이지를 담당하게 되었는데 필터 기능, 페이지 사이즈 관련 기능, 페이지네이션 기능 등을 이용하려다 보니 비슷한 동작을 하는 여러 개의 함수가 만들어지게 됐다.

// 비슷한 3개의 함수
getViewType = type => {
    this.setState({ viewType: type });
  };

getFilterType = type => {
    this.setState({ filter: type });
  };

getCurrentPage = num => {
    this.setState({ page: Number(num) });

기능에는 문제가 없었으나 계산된 속성명을 이용하면 이를 하나로 줄일 수 있어보였다. 3개의 함수 모두 단순하게 setState() 만을 목적으로 하고 있기 때문이었다.

사용 예시

 getPageOption = (value, setTarget) => {
    this.setState({ [setTarget]: value });
  };

비슷한 동작을 하는 3개의 함수는 계산된 속성명을 통해 하나의 함수로 줄일 수 있었다. 위를 보면 setTarget 이라는 매개변수를 통해서 setState 안에서 [setTarget] 이 동적으로 계산되면서 상황에 맞게 들어가고 있음을 알 수 있다. 여기서 []을 사용하지 않으면 setTarget 에 들어오는 인자가 아닌 setTarget 이라는 이름을 가진 프로퍼티에 value 가 할당되기 때문에 원하는 대로 동작하지 않는다.

개인적으로 프로젝트를 하면서 마음에 들었던 코드 중에 하나이다. 항상 느끼는 바이지만 동일한 동작을 하는 코드를 줄여나가고 가독성을 늘릴 수 있을 때 짜릿함이 느껴진다. ✨