Shorthand Properties와 Concise Method

간단한 CSS 문법을 보자. 오른쪽과 같이 하나의 대상에 대한 여러 개의 속성들(background, margin…)을 왼쪽과 같이 suffix를 떼고 하나로 모아 한꺼번에 표시할 수 있다.

.before {
  background-color: #000;
  background-image: url('images/bg.jpg');
  background-repeat: no-repeat;
  background-position: left-top;

  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 10px;
  margin-left: 5px;
}

.after {
  background: #000 url('images/bg.jpg') no-repeat left-top;
  margin: 10px 5px 10px 5px;
}

이렇듯 서로 다른 속성들을 한꺼번에 같이 표시해줄 수 있는 표기 방법을 shorthand property라고 한다(참고).

const person = {
  firstName: 'poco',
  lastName: 'jang',
  getFullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

여기서 person 객체의 두 속성들을 shorthand property로 정리하고, 밑의 메서드를 concise method로 정리해보자.

const firstName = 'poco'
const lastName = 'jang'

const **person** = {
  firstName,
  lastName,
  getFullName() { // concise method
    return this.firstName + ' ' + this.lastName
  }
}

메서드까지 shorthand로 작성해볼까?

const firstName = 'poco'
const lastName = 'jang'
const getFullName = function () {
  return this.firstName + ' ' + this.lastName
}

const person = {
  firstName,
  lastName,
  getFullName,
}

이렇듯 객체의 속성과 메서드를 더 짧고 간결하게 표현하는 방식이 있다는 것을 알아두자.

Computed Property Name(ES6)

import React, {useState} from 'react';

export function App(props) {
  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>
  );
}

// Log to console
console.log('Hello console')

여기서 [e.target.name]이 computed property name이다.

computed property name은 표현식을 이용해 객체의 키 값을 정의하는 문법이라 한다. 무슨 뜻이냐,

const obj = {
  ['a' + 'b']: 'string?'
}

obj['ab'] // string?

------------------------------------
const funcName = 'increase'

const obj = {
  [funcName](num) {
    return num + 1
  }
}

obj.increase(1) // 2
obj.funcName(1) // obj.funcName is not a function

다음과 같이 대괄호 안에 표현식을 넣어 객체의 키 값으로 만들어줄 수 있다는 뜻이다. 특히 두 번째 코드에서 객체의 키 값을 변수로 정해주고 string 값을 주었는데, 이 때 해당 변수 값을 접근했을 때는 사용하지 못하다가 해당 string값을 주어야 사용이 가능한 것을 알 수 있다.