요기요 클론코딩을 하면서 배운 것(4)

요기요 클론코딩을 하면서 카테고리가 전체보기, 한식, 중식, 일식 이렇게 4가지가 있었는데, 백엔드 쪽에서 전체보기에 대한 하면을 별도로 작성하지 않고 그냥 처음에 들어가는 화면이 전체보기로 구성되게끔 만들었었다. 백엔드와 소통을 하다가 결국 전체보기에 해당하는 all이라는 키워드가 들어간 쿼리스트링을 만들 시간이 부족하다고 의견이 나와서 결국 프론트 단에서 알아서 처리를 해야했다.

결국 이 문제를 해결하기 위해서는 결국 사용자가 전체보기 버튼을 누르면 초기의 화면으로 되돌아가게끔 코드를 짜야한다. 그런데 이경우에 사용자가 전체보기를 클릭하고 별점/리뷰 순서대로 기능을 쓸 수도 있다.

export default function RestaurantList() {
  const [restaurants, setRestaurants] = useState([]);
  const navigate = useNavigate();
  const location = useLocation();
  const [selectedKeyword, setKeyword] = useState('');

  useEffect(() => {
    fetch(`http://10.58.0.52:8000/restaurants/list${location.search}`)
      .then(res => res.json())
      .then(result => setRestaurants(result.result));
  }, [location.search]);

  const updateKeywords = buttonKeyword => {
    const keyword = buttonKeyword;

    const queryString = `?category=${keyword}`;

    navigate(`/restaurants/list${queryString}`);
    setKeyword(queryString);
  };
 const updateCategories = optionKeyword => {
    const sortedOption = optionKeyword;
    const sortedqueryString = `sort=${sortedOption}`;

    selectedKeyword
      ? navigate(`/restaurants/list${selectedKeyword}&${sortedqueryString}`)
      : navigate(`/restaurants/list?${sortedqueryString}`);
  };

이러한 점들을 고려해서 코드를 짜야했는데 처음에는 어떻게 해야하는지 많은 고민을 했었다. 그런데 알고보니 답은 간단했었다. 사용자가 전체보기 버튼을 클릭했을 때, 그냥 빈 스티링을 보내서 백엔드에 요청을 하면 되는 것이었다.
즉, 내가 또 새로운 코드를 짜는 것이 아니라 all 대신에 빈 스트링만 넣어주면 작동하는 것인데 아침부터 1시간 동안 고민을 하고 있었던 것이다.

export default function Buttons({ updateKeywords }) {
  return (
    <div className="restaurantMenuTap">
      <button type="button" onClick={() => updateKeywords('')} value="all">
        전 체
      </button>
      //all 대신에 ''
      
      <button
        type="button"
        onClick={() => updateKeywords('korean')}
        value="korean"
      >
        한 식
      </button>
      <button
        type="button"
        onClick={() => updateKeywords('chinese')}
        value="chinese"
      >
        중 식
      </button>
      <button
        type="button"
        onClick={() => updateKeywords('japanese')}
        value="japanese"
      >
        일 식
      </button>
    </div>
  );
}

그러면 어차피 빈 스트링(string)을 받아서

/restaurants/list

라는 화면, 즉 초기의 전체화면을 불러올 것이고 이후에 정렬하기 기능을 사용자가 쓰다고해도

/restaurants/list${sortedqueryString}`)

전체보기에서 별점/리뷰 순서대로의 정렬기능이 처리되어서 display되기 때문에 문제가 없는 것이었다.

이번 문제해결을 통해서 항상 답이 코드를 뭔가 더 쓰거나 작성하는 것이 아니라 무엇인가 하나 없애는 것과 같은 간단한 논리적인 해결만으로도 문제를 해결할 수 있었다는 교훈을 얻게 되었다.