오늘의 개발 문제 : useState 초기값 설정

오늘은 React 프로젝트를 만들면서 useState 초기값 설정의 중요성을 뼈저리게 느꼈다. 유저 관리 시스템을 만들고 있었는데, 처음에 useState({})로 객체를 초기값으로 설정했다.

내 머릿속에는 users라는 공간에 유저 정보를 담는다는 것이다라고 별 문제 없이 생각했고, 코드도 깔끔하게 작성된 것 같았다. 그런데 UserList 컴포넌트에서 users.map()을 사용하는 순간, 에러 메시지들이 나왔고. "users.map is not a function" - 처음엔 무슨 말인지 이해가 안 갔다. map은 분명히 배웠고, 여러 번 써봤는데 왜 갑자기 함수가 아니라는 거지? 한참을 헤매다가 깨달았다. 내가 만든 users는 객체였고, map은 배열에서만 쓸 수 있는 메서드였다.

 

객체 {}와 배열 []의 차이를 머리로는 알고 있었지만, 실제 상황에서 구분하지 못한 것이다. 더 당황스러웠던 건, 왜 내가 객체로 초기화했는지 명확한 이유가 없었다는 점이다. 그냥... "유저 정보를 담으니까 객체겠지?" 하는 막연한 느낌으로 {}를 썼던 것 같다. users라는 이름이 복수형인데도 말이다. 수정은 간단했다. useState({})를 useState([])로 바꾸는 것. 괄호 하나의 차이였다. 하지만 이 작은 차이가 프로그램 전체의 동작을 결정했다.

 

이 경험을 통해 깨달은 건, 데이터의 형태를 먼저 생각해야 한다는 것이다. users(복수)면 배열, user(단수)면 객체. 이렇게 간단한 규칙인데, 실전에서는 놓치기 쉬웠다. 앞으로는 useState를 쓸 때마다 "이 데이터는 여러 개인가, 하나인가?"를 먼저 물어봐야겠다. 그리고 초기값의 타입이 나중에 사용할 메서드와 일치하는지 확인하는 습관을 들여야겠다. 작은 실수지만, 이런 실수가 쌓이면 큰 버그가 된다는 걸 오늘 배웠다.