[리액트] 버튼에 따라 내용 다르게 보여주기

00. 들어가기 전에
버튼에 따라 동작하게는 다양하게 구현 할 수 있으나, 가장 깔끔하다고 느낀 형태를 기록하고자 한다.

01. 버튼에 들어갈 data useState()로 상태값 선언하기

const [products, setProducts] = useState()

02. 버튼에 이벤트 관련 함수 설정

• 중요한 점은 같은 온 클릭 함수에서 다른 props를 보낸다는 것!

 <ThemeSection>
      <ThemeButton
            themeName={"#따순머그컵"}
            onClick={() => onClickThemeButton(1)}
       />
       <ThemeButton
            themeName={"#여름엔바로"}
            onClick={() => onClickThemeButton(2)}
       />
</ThemeSection>

03. Button 컴포넌트에 props로 onClick넘겨주기

const ThemeButton = ({ themeName, onClick }) => {
  return <ThemeButtonStyled onClick={onClick}>{themeName}</ThemeButtonStyled>;
};

04. 온 클릭 함수에서 if 구문 사용, 받아오는 props에 따라 다른 조건 설정

const onClickThemeButton = (themeId) => {
   if (themeId === 1) {
       setProducts(mockTheme1Produdcts);
   } else {
       setProducts(mockTheme2Produdcts);
   }
};

05. 정보 받아 맵 돌리기

products.map((product) => (
    <ProductCard
          onClick={() => navigate(`product/${product.id}`)}
          key={product.id}
          name={product.name}
          description={product.description}
          thumbnail={product.thumbnail}
	/>
))

06. 처음 선택이 없을 때

• 3항 연산자 사용, products가 빈값이면

<ProductSection>
    {products ? (
        products.map((product) => (
            <ProductCard
              onClick={() => navigate(`product/${product.id}`)}
              key={product.id}
              name={product.name}
              description={product.description}
              thumbnail={product.thumbnail}
            />
            ))
        ) : (
        <div>테마를 선택해주세요</div>
    )}
</ProductSection>

• useEffect, setTimeOut으로 일초 후 초기값 설정해주기

useEffect(() => {
   // 1초 후, 상품 초기화
    setTimeout(() => {
      setProducts(mockTheme1Produdcts);
    }, 1000);
}, []);