e.target.value

https://stackoverflow.com/questions/50376353/wy-we-need-to-put-e-target-name-in-square-brackets

객체 속성을 동적으로 업데이트하는것입니다.
속성의 이름을 알수 없지만 , 이방법으로 다른 name 속성을 가지며 동일한 onChange 핸들러를 사용하여 상태의 일부를 업데이트 하는 여러 React 입력을 가질 수 있습니다.

javascript

<input type="text" name="title" onChange={this.onTitleChange} value={this.state.title} />
<input type="text" name="address" onChange={this.onDescriptionChange} value={this.state.address} />
<input type="text" name="description" onChange={this.onAddressChange} value={this.state.description} />

onTitleChange (e) {
   this.setState({ title : e.target.value});
}
onAddressChange (e) {
   this.setState({ address : e.target.value});
}
onDescriptionChange (e) {
   this.setState({ description : e.target.value});
}

[e.target.name]

객체 안에서
key 를 []로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용됩니다.

const name = 'variantKey';
const object = {
  [name] : 'value'
};

//결과 값
{
  'variantKey' : 'value'
}

<input type="text" name="title" onChange={this.onChange} value={this.state.title} />
<input type="text" name="address" onChange={this.onChange} value={this.state.address} />
<input type="text" name="description" onChange={this.onChange} value={this.state.description} />

onChange (e) {
   this.setState({ [e.target.name] : e.target.value});
}

하나의 핸들러만 을 가지고 작성 할 수가 있습니다.