[Team Project] Bid Panda ep.4

김고야·2023년 10월 12일
0

Team Project

목록 보기
9/18
post-thumbnail

✶ 항해99 16기 3조
팀 프로젝트 Bid Panda의 FE 개발일지

Issue ▸

이미 개발된 게시글 페이지인 Aution List 소스코드는 state로 e.target.value값을 받아서 카테고리 조건으로 해둔 뒤, map으로 게시글 리스트를 그려주고 있었다. 동료의 코드가 메인 페이지의 카테고리 아이콘으로 부터의 접근에서 허용하지 않았다.

Recoil State를 사용하여 접근할 수 있는 카테고리 그 자체의 state값을 전달해줄 수 있었다.

그러나...

Recoil State에 저장 되었던 e.target.value가 동기적으로 작동되는 Recoil의 특성 때문에, 원하는 실행 순서로 진행되지 않았고, 이 문제를 해결하기 위해 다양한 해법을 모색했으나, 결국 e.target.value의 값을 할당한 변수 그 자체를 navigate에 사용하면서 실행 순서가 잘못되는 현 문제를 해결할 수 있었음.

Solve :

import { useNavigate } from "react-router-dom";
import { useRecoilValue } from "recoil";
import { categoryList } from "../../atoms/category";

const CategoriesIcon = () => {
  const categoryLi = useRecoilValue(categoryList);
  const navigate = useNavigate();
  const onClickCategory = (event: React.MouseEvent<HTMLButtonElement>) => {
    const select = event.currentTarget.value;
    // setRecoilValue가 이 라인에서 문제를 일으켰다.
    navigate(`/items/list/${select}`);
  };
  return (
    <>
      {categoryLi.map((item, index) => (
        <button
          key={index}
          value={item}
          className="w-[76px] h-[76px] shadow-md rounded-[17px] m-1"
          onClick={onClickCategory}
        >
          {item}
        </button>
      ))}
    </>
  );
};
export default CategoriesIcon;
profile
Frontend Engineer

0개의 댓글

Powered by GraphCDN, the GraphQL CDN