Shorthand Property & concise methods

• 코드를 간단히 축약 가능
• ES2015 등장한 문법

const name = "Jon";
const age = 20;
const person = {
  name,
	age,
  getProfile: function() {
		return "name : "+ this.name + " age : " + this.age; 
  }
}

Computed Property Name

• 객체의 프로퍼티 key를 문자열로 변환할 수 있는 표현식을 사용해(변수, 함수 등) 동적으로 지정하는 문법
• Computed Property Name으로 프로퍼티 키를 동적으로 생성할 수 있다.
• 프로퍼티 키로 사용할 표현식을 [ ]로 묶어야 한다.

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>
  )
}

Lookup Table

• 배열 데이터 구조에서 key와 value로 관리된 배열이 나열된 형태를 의미
• 객체를 Lookup Table 형태로 할당한 후 함수 인자에 따라 해당 데이터를 리턴하여 유연하게 사용 가능
• Computed Property Name를 활용하여 불필요한 분기문을 줄일 수 있음

function getUserType(type) {
  switch (key) {
    case 'ADMIN':
      return '관리자';
    case 'INSTRUCTOR':
      return '강사';
    case 'STUDENT':
      return '수강생';
    default:
      return '해당 없음';
  }
}

getUserType('ADMIN'); // 관리자

// object LookupTable 리팩토링
const USER_TYPE = {
  ADMIN: '관리자',
  INSTRUCTOR: '강사',
  STUDENT: '수강생',
  UN: '해당 없음'
}

function getUserType(type) {
  return USER_TYPE[type] || USER_TYPE.UN;
}

getUserType('ADMIN'); // 관리자
getUserType(''); // 해당 없음

Object Destructuring