[React] 리액트 <select>에서 state로 defaultValue가 안먹힐 때

 

📌 TL;DR

defaultValue로 정의했는데 selected가 안될 시 key속성과 같이 사용!

key={value} defaultValue={value}

 

 

💣 문제 발생

(프로필 설정에 들어갔을 때 DB에 저장된 값이 있으면 프로필 설정 폼에 미리 반영되도록 하는 해야 하는 상황!)

<select
  className="profile-setting-info-select"
  name="userYearOfBirth"
  onChange={onChange}
  defaultValue={userYearOfBirth}
>
  <option value="default" onChange={onChange} disabled>
    나이를 입력하세요
  </option>
  {yearList.map((item, idx) => (
    <option key={idx} value={item.value} onChange={onChange}>
      {item.value}
    </option>
  ))}
</select>;

 

api를 요청해서 state값인 userYearOfBirth 값을 업데이트하였는데 콘솔 창에 찍힌 것과 같이 "1992"가 아닌 최상단의 "2009'로 selected 되어있습니다.

 

일반적으로 HTML과 JavaScript에서는 selected 속성을 사용해서 기본값을 설정하지만 리액트에서는 selected속성 대신 value를 사용해서 기본값을 세팅합니다.

value로 기본값 설정 시 읽기 전용으로 취급되어 값이 변경되지 않으며 여기서 defaultValue를 사용하면 비제어 컴포넌트로 활용하면서 변경되는 값으로 사용이 가능합니다.

그러나 defaultValue에 변경되는 state값을 넣어줬을 때 값이 선택하지 않는 문제가 발생했는데 key 속성을 추가하니 기본값이 제대로 작동되는 것을 확인하였습니다.

 

<select
  className="profile-setting-info-select"
  name="userYearOfBirth"
  onChange={onChange}
  key={userYearOfBirth}
  defaultValue={userYearOfBirth}
>
  <option value="default" onChange={onChange} disabled>
    나이를 입력하세요
  </option>
  {yearList.map((item, idx) => (
    <option key={idx} value={item.value} onChange={onChange}>
      {item.value}
    </option>
  ))}
</select>;

 

 

그러나 key와 defaultValue를 같은 값으로 설정해두면 key가 유니크한 값이 아니라서 select의 기본값이 제대로 적용되지 않는 오류가 발생할 수 있습니다.

 

key는 반드시 변하지 않고, 예상 가능하며, 유일해야 합니다. 변하는 key(Math.random()으로 생성된 값 등)를 사용하면 많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠지거나 자식 컴포넌트의 state가 유실될 수 있습니다.

https://ko.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key

 

따라서 변하는 값으로 key를 지정하는 것이 아닌 uuid의 고유한 값으로 설정해두면 확실히 해결할 수 있습니다.

$ npm i react-uuid

import uuid from "react-uuid"

// ...

return (
  <select key={uuid()} value={value}>
  </select>
)