2차 프로젝트 세번째

Do do

• 레이아웃 만들기
• 컴포넌트화 하기
• 한페이지 안에 styled-components 적용하기
• 기능 구현 craousel
• mockdata화
• mockdata연결
• category별 필터링
• 더보기에서 전체보기
• 인기순 페이지 구현(랜덤 or 예약순)
• 식당이름으로 검색하기

Doing

• react-slick 사용하여 사용중이나 커스터마이징이 어려움
• category별 필터링
• 더보기에서 전체보기
  생략예정
• 인기순 페이지 구현(랜덤 or 예약순)
• 식당이름으로 검색하기

Blocker

데이터를 props로 내리는 과정에서 첫번째 컴포넌트로는 무사하게 넘겼으나 다음 컴포넌트로는 원하는데로 보내지를 못했다.

const Main = () => {
  const [data, setData] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState('');

  useEffect(() => {
    fetch('http://localhost:3000/data/MockData.json')
      .then(res => res.json())
      .then(data => {
        setData(data);
      });
  }, []);

데이터를 fetch하여 가져온 후 useState로 배열에 담아 놓는다.

return (
  <StyledMain>
    <StyledBannerWrap>
      <StyledVideo> 동영상 </StyledVideo>
      <StyledCarousel>
        <CarouselBanner />
      </StyledCarousel>
    </StyledBannerWrap>
    <StyledSearchBar>
      <StyledInput type="search" placeholder="🔍️ &nbsp; 오늘의집 통합검색" />
    </StyledSearchBar>
    <StyledRecommendCarousel>
      <RecommendFoodCarousel data={data} />
    </StyledRecommendCarousel>
    <StyledFoodCategory>
      {categoryInfo.map((value, i) => (
        <CategoryCard
          key={i}
          value={value}
          selectedCategory={selectedCategory}
          setSelectedCategory={setSelectedCategory}
        />
      ))}
    </StyledFoodCategory>
    <CategoryRestaurantList data={data} />
  </StyledMain>
);

<CategoryRestaurantList data={data} /> 보내고 싶은 컴포넌트에 props로 내려 준 후 data={data}
이 데이터를 다음 컴포넌트에서 map해준다.

const CategoryRestaurantList = ({ data }) => {
  return (
    <StyledRecommendCard>
      {data.map((value, i) => (
        <div key={i} style={{ width: '25%' }}>
          <RecommendFoodCard key={i} value={value} />
        </div>
      ))}
    </StyledRecommendCard>
  );
};

({ data }) 객체로 받아와야 하는데 처음에 그냥 const CategoryRestaurantList = data => {} 이렇게 props로 받아와 원하는 상태로 받아오지 못했다.
`{data.map((value, i) => (

    <div key={i} style={{ width: '25%' }}>
      <RecommendFoodCard key={i} value={value} />
    </div>`

그 다음 그 데이터를 바로 map 해주면 된다. 그 다음 이 데이터를 그대로 다음의 컴포넌트 RecommendFoodCard에 보내주기 위해 객체 하나하나를 value={value} 담아 다음 컴포넌트로 보내준다.
그래야 내가 사용 할 수 있는 객체 하나하나의 형태로 데이터가 넘어오게 된다.

그 다음으로 객체의 key를 사용해주면 된다.

const RecommendFoodCard = ({ value }) => {
  const [isBookMark, setIsBookMark] = useState(false);
  console.log(value);
  return (
    <StyledRecommend>
      <StyledRecommendCard>
        <StyledRecommendCardImg art="restaurant" src={value.thumbnail_image} />
        {isBookMark ? (
          <i
            onClick={() => setIsBookMark(!isBookMark)}
            className="fa-solid fa-bookmark"
          />
        ) : (
          <i
            onClick={() => setIsBookMark(!isBookMark)}
            className="fa-regular fa-bookmark"
          />
        )}
      </StyledRecommendCard>
      <StyledRestaurant>{value.name}</StyledRestaurant>
      <StyledRestaurantMenu>{value.address}</StyledRestaurantMenu>
    </StyledRecommend>
  );
};

({ value }) props로 받아오고 원하는 위치에서
<StyledRecommendCardImg art="restaurant" src={value.thumbnail_image} /> 객체의 이미지
<StyledRestaurant>{value.name}</StyledRestaurant> <StyledRestaurantMenu>{value.address}주소와 이름 같은 형식으로 사용 해주면 된다. 데이터가 넘어 올 때 마다 객체인지 배열인지를 정확히 확인하고 사용해야 한다. 다시한번 디버깅의 중요성을 알게되었다.

1주차 느낀 점

• 1차 프로젝트보다는 시간이 단축 되었다
• 1차 때 사용했던 스킬들이 온전히 내 것이 아니었다. 알고 쓴게 아니라 그냥 가져다 쓰기만 한 느낌 온전한 내것으로 만들어야 겠다.
• 새로운 스킬을 계속 배우고 있지만 아직 적용해본것이 몇가지 없다. 완성 후 절대적으로 리펙토링이 필요하다.
• 1차 때보다는 확실이 코드들이 눈에 들어고 데이터가 어디에서 어디로 넘어가는지 조금은 더 알게 되었다.
• 부족한 부분들이 보이기 시작하니 어디를 공부해야 할지 알게 되는 것 같다.