React. Category가 바뀔 때 마다 관련 게시물 렌더링

처음에는 전체 리스트를 보여주고, 카테고리를 선택할 때 마다 관련 카테고리에 포함된 리스트를 보여줘야 하는 것을 구현해야 했다.

생각이 잘 떠오르지 않아, 같은 프엔 팀원에게 물어보면서 혼자 답을 찾아내게 되었고(유레카!), 다음과 같이 적용할 수 있었다.

로직은 category에서 선택 -> 해당 category를 상위 컴포넌트에서 인식 -> 이에 따라 카테고리를 받아오는 api가 re-render 되면서 category가 변하면 다시 받아오는 방식으로 진행했다.

ProductList(Parent)

  const [isClick, setIsClick] = useState(false);
  const [search, setSearch] = useState("");
  const [getArticle, setArticles] = useState([]);

useEffect(() => {
    getShareArticleList(category, 0, 200, 0, "").then((res) => {
      const data = res;
      // console.log(data);
      setArticles(data);
    });
  }, [category]);
  

getShareArticleList에서 받아오고,

<ProductCategory isMain={false} sendCategory={receiveCategory} />

Category(Child)

const ProductCategory = ({ isMain, sendCategory }) => {
const categoryType = [
  "화장품/미용",
  "생활/건강",
  "식품",
  "스포츠/레저",
  "가구/인테리어",
  "디지털/가전",
  "출산/육아",
  "패션잡화",
  "여가/생활편의",
  "패션의류",
  "도서",
]; 

sendCategory에서 props를 전달해주고,

function onClickCategoryType(type) {
  setCategory(type);
  setOpenCategory(false);
}

useEffect(() => {
  sendCategory(category);
}, [category]);

return (
  <div css={isMain ? categoryWrapper : noBorder}>
    <span>{category}</span>
    <button onClick={onClickOpenCategory}>
      {openCategory ? <HiChevronLeft size="18" /> : <HiChevronRight size="18" />}
    </button>
    {openCategory ? (
      <div css={isMain ? categoryTypeWrapper : categoryTypeModifyWrapper}>
        {categoryType.map((category, index) => (
          <span key={index} onClick={() => onClickCategoryType(category)}>
            {category}
          </span>
        ))}
      </div>

를 통해 카테고리가 선택되면 -> 상위 컴퍼넌트에서 이를 받아와 api가 re-render되는 방식이다.