[React] select box value값 가져오기와 option 값이 나오지 않는 경우

리액트로 프로젝트를 하면서 작성페이지의 firebase에 POST 요청 부분을 맡았다.
그 중 오늘 접한 쉽디 쉽지만(?) 나는 바로 알아채지 못했던 부분에 대해서 얘기하려고 한다.

일단 프로젝트 팀원이 select box를 그냥 마크업을 해놨다.
나는 POST 하기 위해서는 value 값이 필요했기 때문에 map을 이용해 리스트 렌더링을 해줘야했다.

 

팀원이 그냥 작성한 코드 

 

여기서 state가 바뀔 때 마다 값을 가져와야 하기 때문에 useState()를 이용해서 상태를 만들어준다. (추후에 recoil로 상태관리를 할 것이다.)

  // select box
  const selectList = [
    { value: "default", name: "토픽 선택" },
    { value: "skill", name: "기술" },
    { value: "career", name: "커리어" },
  ];
  const [selected, setSelected] = useState("토픽 선택");

  const handleSelect = (e) => {
    setSelected(e.target.value);
  };
  
  <select className={styles.select} onChange={handleSelect} value={selected}>
          {selectList.map((item) => {
            <option value={item.value} key={item.value}>
              {item.name}
            </option>;
          })}
  </select>

 

근데 여기서 어이없는 실수를 하고 만다...

나는 올바르게 적용한 것 같은데 계속 빈칸 상태가 나오는 것이다.

그래서 구글링을 엄청 하고 여러방법을 시도했지만 모두 실패했다. 

그러다가 나와 같은 문제를 접한 분의 글을 보게 되었다.

 

https://jsdev.kr/t/react-select-option/6667

react select option 값 나오지 않음

 

 

바로!! return 을 안했다!! 😟

순간 멍해졌다. 난 왜 리턴을 안했을까..

리턴을 하고나면 바로 뿅! 하고 생긴다.

 

이런 상황이 생길수도(?) 있으니 글로 남겨봤다.

너무 쉬운...문제라 눈에 안보일수도 있으니 혹여나 같은 문제에 처할 수 있는 사람을 위해 남겨본다!