리액트 Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

리액트 프런트엔드 개발 중에 select를 사용할 때 jquery를 쓰던 습성대로 코딩을 하다 보면 반드시 만나게 되는 흔한 오류 중의 하나가 바로 selected를 사용하지 말라는 경고다.

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

'selected'대신에 select에 defaultValue 또는 value props를 사용하라는 뜻이다.

잘못 쓴 리액트 셀렉트 사용법

<select id="cons_keep_sel" disabled={modeDisabled}>
  <option
    value=""
    selected={
      companyInfo.cons_keep !== "Y" && companyInfo.cons_keep !== "N"
        ? true
        : false
    }
  >
    선택안함
  </option>
  <option value="Y" selected={companyInfo.cons_keep === "Y" ? true : false}>
    가맹
  </option>
  <option value="N" selected={companyInfo.cons_keep === "N" ? true : false}>
    해지
  </option>
</select>;

아래와 같이 쓰면 간단하다.

<select id="cons_keep_sel" disabled={modeDisabled} value={companyInfo.cons_keep} ref={inpConsKeep}>
  <option value="">선택안함</option>
  <option value="Y">가맹</option>
  <option value="N">해지</option>
</select>

ref props는 필요에 따라 사용된 것이니 신경쓰지 않아도 무방하다.

만약 select에서 멀티플 셀렉트로 선택할 경우에는 value를 배열로 주면 된다.

<select multiple={true} value={['B', 'C']}>

이 점은 거의 부트스트랩 셀렉트와 같은 개념이다.

아래는 reactjs.org의 예제다.

ko.reactjs.org/docs/forms.html

폼 – React

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}