select 초기값 설정해줘..

Summary

사실 오늘의 삽질은... 그저 api를 통해 받아온 데이터 값을 제대로 확인 안 한 저의 잘못이었습니다...

진짜 이걸로 시간을 날린게 너무 속상하고,... 슬프고... 근데 내 탓이고... 

---

Problem

암튼 지역을 선택하기 위한 select를 만들었습니다. 초기값을 '인천'으로 해주고 싶었어요. 

리액트에서는 select에서 초기값을 사용하려면 defaultValue를 사용해야하더라고요. (option에 selected 요런 거 쓰면 warning 떠버림)

그래서 defaultValue로 제가 초기로 설정하고 싶은 도시의 id를 주었습니다. (openWeather API 사용 도시 id를 통해서 도시의 날씨 정보 가져옴) 다음과 같이 코드를 작성하였습니다. 

결론부터 말하겠습니다. 아래 코드는 틀리지않았어요.. 정상 작동하는 친구입니다... 

 <select defaultValue={cityId} onChange={onChange}>
        <option disabled>도시를 선택하세요.</option>
        {onlyKR.map((el) => (
          <option key={el.id} value={el.id}>
            {el.name}
          </option>
        ))}
      </select>

그럼 뭐가 틀렸냐고요..?

아래 cityId 초기값으로 준게 인천의 id입니다... 근데 인천 id가 두 개예요. 

예를 들어 인천 id가 1, 2에요. 제가 cityId 초기값으로 1을 줬다고 합시다.

select option을 만들 때 json 데이터를 map으로 만들었습니다. 근데 이 json 데이터에서 인천의 id는 2에요.

select defaultValue를 1로 설정해봤자.. 없다... option에서 value 값으로 1을 가진 애가 없다... 그래서 초기값이 계속 설정되지 않았던 거다...

 

  const [cityId, setCityId] = useState(1843561);

---

Solved

나중에 조건문으로 el.id랑 cityId 같은 경우 찍어봤는데 아무것도 뜨지 않는 것을 보고 그때 깨달았습니다. 뭔가 잘못되었음을... 그리고 id를 확인해 보니 인천 id 가 달랐다.. 그래서 id를 맞춰주니 아주 잘 됩니다..^^

  const [cityId, setCityId] = useState(1843564);

---

오늘의 교훈 데이터를 잘 확인하자