[JavaScript]동적으로 프로퍼티 추가

이번 포스팅은 JavaScript에서 객체의 프로퍼티를 동적으로 추가하는 방법을 소개합니다.

---

Computed Property Names

계산된 프로퍼티 이름(Computed Property Names)은 자바스크립트 객체 프로퍼티 이름을 동적으로 설정할 수 있도록 해주는 ES6의 기능입니다.

 

유효한 값을 반환하는 변수 또는 함수를 대괄호 안에 작성하여 객체의 프로퍼티를 동적으로 추가할 수 있습니다.

 

다음 예제는 age라는 변수를 정의 및 선언하고 객체의 대괄호에 설정합니다.

const age = 'age';

const personObject = {
  name: 'Bob',
  [age]: 30
}

console.log(personObject);
console.log(personObject.age);
console.log(personObject[age]);

실행 결과

{name: 'Bob', age: 30}
30
30

---

복잡한 표현식

대괄호에는 변수와 문자열을 조합하여 객체의 프로퍼티를 동적으로 추가할 수 있습니다.

 

다음 예제는 문자열과 변수를 조합하여 객체의 프로퍼티를 추가합니다.

const strValue = 'g';

const personObject = {
  name: 'Bob',
  ['a' + strValue + 'e']: 30
}

console.log(personObject);
console.log(personObject.age);
console.log(personObject[age]);

실행 결과

{name: 'Bob', age: 30}
30
30

---

함수 전달

대괄호에는 변수뿐만 아니라 함수도 설정할 수 있습니다.

 

다음 예제는 대괄호에 함수를 설정하여 객체의 프로퍼티를 추가합니다.

function getStringName() {
  return 'ag'
}

const personObject = {
  name: 'Bob',
  [getStringName() + 'e']: 30
}

console.log(personObject);
console.log(personObject.age);
console.log(personObject[age]);

실행 결과

{name: 'Bob', age: 30}
30
30

---

React 예제

Computed Property Names는 리액트에서 유용하게 사용할 수 있습니다. input 태그 또는 특정 컴포넌트를 많이 사용하고 onChange 이벤트에서 값을 변경해야 하는 경우 한 개의 함수로 처리할 수 있습니다.

 

리팩토링 전

render() {
  return (
    <div>
      <input type='text' 
             value={this.state.firstName}
             onChange={(e) => {
               this.setState({firstName: e.target.value});
             }}
      />    
      <br />
      <input type='text' 
             value={this.state.lastName}
             onChange={(e) => {
               this.setState({lastName: e.target.value});
             }}
      />    
      <br />
      <input type='text' 
             value={this.state.age}
             onChange={(e) => {
               this.setState({age: e.target.value});
             }}
      />    
      <br />
      <input type='text' 
             value={this.state.address}
             onChange={(e) => {
               this.setState({address: e.target.value});
             }}
      />    
    </div>
  );
}

리팩토링 후

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

render() {
  return (
    <div>
      <input type='text' 
             name='firstName' 
             value={this.state.firstName}
             onChange={this.handleChange}
      />    
      <br />
      <input type='text' 
             name='lastName' 
             value={this.state.lastName}
             onChange={this.handleChange}
      />    
      <br />
      <input type='text' 
             name='age' 
             value={this.state.age}
             onChange={this.handleChange}
      />    
      <br />
      <input type='text' 
             name='address' 
             value={this.state.address}
             onChange={this.handleChange}
      />    
    </div>
  );
}