TIL 12.22

오늘 목표
MenuList.jsx에서 구조잡기

• 4개의 카테고리를 내비바처럼 보여주고 클릭하면 그 아래 항목들이 나오도록 구현.
• 각 카테고리마다 initialState 보여주기.

1.initialState에 이미지를 저장할 수 있는가
-> 이미지를 곧바로 저장하지 않고 이미지 주소를 저장해둔 후 img태그에 저장해둔 주소를 넣어주었다.

const initialState = [
  {
    category: 'Bread',
    name: '토종효모식빵',
    img: 'images/Products/bread.jpeg',
    id: uuidv4(),
  },

  return (
    <>
      <StyledCategroyBox>
        <div onClick={changeCategory('Bread')}>Bread</div>
        <div onClick={changeCategory('Cake')}>Cake</div>
        <div onClick={changeCategory('Cookie')}>Cookie</div>
        <div onClick={changeCategory('Coffee')}>Coffee</div>
      </StyledCategroyBox>
      <StyledListBox>
        {/* products중에 카테고리가 bread인 아이템들만 가져와서 */}
        {products
          .filter((item) => item.category === 'Bread')
          .map((item) => {
            return (
              <div>
                <img src={item.img} />
                <p>{item.name}</p>
              </div>
            );
          })}
      </StyledListBox>
    </>
  );
}

2. 카테고리와 그 하위 항목들을 어떻게 연결해서 보여줄 것인가
   -> 카테고리를 누르면 선택된 카테고리로 useState로 상태변화를 시켜주고 그 값을 가진 제품들을 불러오게 한다
   -> 무한 렌더링!! 아직 해결하지 못했다.

  const [currentCategory, setCurrentCategory] = useState('Bread');

return (
    <>
      <StyledCategroyBox>
        <div onClick={changeCategory('Bread')}>Bread</div>
        <div onClick={changeCategory('Cake')}>Cake</div>
        <div onClick={changeCategory('Cookie')}>Cookie</div>
        <div onClick={changeCategory('Coffee')}>Coffee</div>
      </StyledCategroyBox>