.list {
  margin:10px;
  border:1px solid #eee;
  box-shadow: 0 2px 2px #ccc;
  width:200px;
  padding:20px;
}

.wrapper {
  display: flex;
  flex-direction: row;
}

.wrapper-inner {
  display: flex;
  flex-direction: column;
}

class Test extends React.Component {
  state = {
      inputValue: '',
      arr: ['default_01','default_02'],
    };
  
  handleChange = (e) => {
    this.setState({
      inputValue: e.target.value
    })
  }
  
  onClickAdd = (e) => {
    const {inputValue, arr} = this.state;
    this.setState({
      arr: [inputValue, ...arr],
    })
  }
  
  render(){
    const {name} = this.props;
    return (
      <div className="test-container">
        <input value={this.state.inputValue}
          onChange={this.handleChange}/>
        <button onClick={this.onClickAdd}>Add first element</button>
        <div className="wrapper">
          <div className="wrapper-inner">
            <header>
              key 가 index 인 경우
            </header>
        {this.state.arr.map((value,idx) => {
          return <div className="list" key={idx}>
            <div>{value}</div>
            <input type='text' className='form-control' />
          </div>
        })}
          </div>
                    <div className="wrapper-inner">
                      <header>
              key 가 value 인 경우
            </header>
        {this.state.arr.map((value,idx) => {
          return <div className="list" key={value}>
            <div>{value}</div>
            <input type='text' className='form-control' />
          </div>
        })}
          </div>
        </div>
      </div>
    );
  }
};

ReactDOM.render(<Test name="테스트성공~!"/>, document.getElementById("app"));