항해99 60일차 TIL : 지도 API 검색에서 나타나는 400에러 문제 해결법 (feat. query)

카카오 지도 API를 이용해서 검색 기능을 넣을 때, 다음과 같은 문제가 개발자도구의 콘솔창에 찍혔다.

검색에는 문제는 없지만, 그래도 찜찜해서 이 문제를 해결하고 싶어졌다. 백엔드 분들에게 물어봐도 모르고, 나도 구글링을 해봐도 알 수 없었다. 콘솔창에 나온 저 URL을 검색창에 입력하면 아래와 같이 나왔다.

이걸로도 검색을 해봤는데, query 문제라고 하고 해결하는 코드도 있었다. 하지만 내가 작성한 검색 코드에 그 해결하는 코드를 입력할 수는 없어보였다. 그래서 튜터님에게 물어봤더니, 저 콘솔창에 나오는 URL에 query에 아무것도 입력이 안 된 것이 문제로 보인다고 하셨다. 이 말씀에 나도 나름 추측을 해봤는데, query는 검색해보니 '데이터베이스에 질문을 해서 정보를 요청함'이라고 나왔다. 정보를 요청하는 것이 query라면 query의 값은 검색어라는 생각이 들었다. 그러니 검색어가 query에 값으로 입력이 되고 있지 않은 것 같다는 추측이 들었다. 이 추측을 튜터님에게 말씀드리니, 그럼 개발자도구를 열어서 Network를 보자고 했다. 그랬더니 아래와 같은 것이 보였다.

튜터님의 추측처럼 저렇게 query가 없다고 나온다는 것이 문제의 원인이라고 짚어주셨다. 그럼 그 query에 입력되는 값이 어떻게 되었는지 살펴야 한다. 내 경우에 query값, 즉 검색어로 입력되는 값은 다음과 같다.

useState를 이용해 설정된 search가 검색어로 query에 전달이 되고, 

264번줄에 search가 검색하는 메소드 함수에 인자로 전달이 되고, 그것의 value가 query라는 변수의 value로 전달이 되는 구조이다. 그렇다면 search가 undefined 상태인채로 인자에 전달이 되는 것이 문제다. 왜냐하면 useState는 비동기처리를 하는데, useState가 일을 끝내기 전에 undefined된 search가 저 검색 메소드에 인자로 전달이 되어 버리는 것이다. 이 문제를 찾았으니, 해결책은 간단하다. 비동기처리의 부작용을 막는 것이다. 다음과 같이 하면 된다.

262번줄처럼, search에 값이 입력이 되어 undefinde가 아니게 되었을 때만 검색이 일어나도록 if문으로 분기해주면 된다. 기대한대로, 개발자도구에 더이상 400에러가 뜨지 않았다. 해결!!! 리액트의 약점이 비동기제어가 잘 안되는 것인데, 리액트에서 비동기 제어법을 또 하나 체화하게 된 시간이었다.