[JavaSciprt]Warning : You provided a `value` prop to a form field without an `onChange` handler.

경고

『 Warning: You provided a 'value' prop to a form field without an 'onChange' handler. This will render a read-only field. If the field should be mutable use 'defaultValue'. Otherwise, set either 'onChange' or 'readOnly' 』

 

해석

'onChange' 이벤트 핸들러 없이 form 내부에서 'value' prop를 사용하였습니다.

value를 사용한 Element는 읽기 전용으로 렌더링 될 것입니다.

만약 값을 수정하고 싶다면, defaultValue를 사용해야 합니다.

그렇지 않으면, 'onChage' 또는 'readOnly'로 설정해야 합니다. 

---

경고 원인

React로 개발한 코드의 일부입니다.

input Element에서 value prop 또는 checked prop를 사용하여 경고가 발생합니다.

<tbody>
  {this.state.data.map((list) => (
    <tr key={list.id}>
      <td>
        <input type="checkbox" checked />
      </td>
      <td>
        <input type="text" value={list.Book} />
      </td>
      <td>
        <input type="text" value={list.Author} />
      </td>
      <td>
        <input type="text" value={list.Language} />
      </td>
      <td>
        <input type="text" value={list.Published} />
      </td>
      <td>
        <input type="text" value={list.Sales} />
      </td>
    </tr>
  ))}
</tbody>

---

경고 해결

1. value 수정 가능 : defaultValue

<tbody>
  {this.state.data.map((list) => (
    <tr key={list.id}>
      <td>
        <input type="checkbox" defaultchecked />
      </td>
      <td>
        <input type="text" defaultvalue={list.Book} />
      </td>
      <td>
        <input type="text" defaultvalue={list.Author} />
      </td>
      <td>
        <input type="text" defaultvalue={list.Language} />
      </td>
      <td>
        <input type="text" defaultvalue={list.Published} />
      </td>
      <td>
        <input type="text" defaultvalue={list.Sales} />
      </td>
    </tr>
  ))}
</tbody>

 

2. value 수정 불가능 : onChange

onChnage 이벤트 핸들러를 생성할 경우 value 수정 불가능하며, 이벤트 핸들러 함수에서 값을 변경하는 로직을 작성해야 합니다.

<tbody>
  {this.state.data.map((list) => (
    <tr key={list.id}>
      <td>
        <input type="checkbox" checked onChange={this.handleOnChange}/>
      </td>
      <td>
        <input type="text" value={list.Book} onChange={this.handleOnChange}/>
      </td>
      <td>
        <input type="text" value={list.Author} onChange={this.handleOnChange}/>
      </td>
      <td>
        <input type="text" value={list.Language} onChange={this.handleOnChange}/>
      </td>
      <td>
        <input type="text" value={list.Published} onChange={this.handleOnChange}/>
      </td>
      <td>
        <input type="text" value={list.Sales} onChange={this.handleOnChange}/>
      </td>
    </tr>
  ))}
</tbody>

 

3. value 수정 불가능 : readOnly

<tbody>
  {this.state.data.map((list) => (
    <tr key={list.id}>
      <td>
        <input type="checkbox" defaultchecked readOnly/>
      </td>
      <td>
        <input type="text" defaultvalue={list.Book} readOnly/>
      </td>
      <td>
        <input type="text" defaultvalue={list.Author} readOnly/>
      </td>
      <td>
        <input type="text" defaultvalue={list.Language} readOnly/>
      </td>
      <td>
        <input type="text" defaultvalue={list.Published} readOnly/>
      </td>
      <td>
        <input type="text" defaultvalue={list.Sales} readOnly/>
      </td>
    </tr>
  ))}
</tbody>

---

예제 코드

아래는 리액트로 작성한 테스트 코드입니다.

주석 해제하면서 콘솔 창에서 경고문 확인하시면 됩니다.