query param을 사용한 초기 선택값이 이상합니다.

Question

React와 Next.js 사용해서 사이트를 만들고 있습니다. 라우터는 next/router를 사용하고 있고요.

라우터를 사용해 사이트의 query param으로 initialItem 값을 받아와서 item 상태의 초기값을 지정해주려고 하는데, 초기값 선택이 이상하게 됩니다. 각 item 값은 enum으로 선언해 사용하고 있고 query param을 lodash의 toNumber를 사용해 숫자로 변환하고 있습니다.

query param이 없는 경우 전체가 선택되게 하고 싶은데 계속 A가 선택되네요. 왜 그런지 아시는 분 계실까요?
충분할지 모르겠지만 초기값 지정하는 부분과 관련된 코드 첨부합니다.

이은재 · Answer

안녕하세요. 혹시 query param 값이 없을 때 라우터에서 어떤 값으로 읽어오는지 확인 해보셨을까요? 해당 값을 빈 스트링으로 불러올 것 같은데 그 경우 isNil로 필터링 되지 않고 아래의 toNumber 로직에서 0으로 변환될 것 같습니다. 그러면 말씀하신 것처럼 item 초기값이 0이될 수 있을 것 같아요.