2차 팀프로젝트 세번째

Do do

• 레이아웃 만들기
• 컴포넌트화 하기
• 한페이지 안에 styled-components 적용하기
• 기능 구현 craousel
• mockdata화
• mockdata연결
• category별 필터링
• 더보기에서 전체보기 무한스크롤로 변경
• 인기순 페이지 구현(랜덤 or 예약순)BE에서 랜덤으로 데이터받기
• 식당이름으로 검색하기
• BackEnd와 데이터 통신확인(5월14일 토요일)
• 상품리스트 무한스크롤
• 로그인 상태에 따른 북마크 추가 및 로그인페이지로 이동
• 상품카드 클릭시 예약페이지 이동 로직
• 카테고리 카드에 전체리스트보기 버튼 만들기

Doing

• category별 필터링
• 식당이름으로 검색하기

Blocker

 const [totalData, setTotalData] = useState([]);
  const [dataList, setDataList] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState('');

filter를 할 대상을 상태에 담아놓고 UI에 그려지는 상태를 조작하여 랜더링이 이루어지게 작업을 한다. 카테고리별 필터링에서 이 부분이 헷갈렸다. 헷갈린 이유는 컴포넌트에서 props로 넘기는 과정에서 꼬이기 시작했다.

  const handleCategory = categoryId => {
    setSelectedCategory(categoryId);
    setDataList(totalData.filter(el => el.category_id === categoryId));
  };

위의 로직을 자식컴포넌트에서 만들려다 보니 props로 넘기는 양이 많아져 기능상의 문제가 생길 가능성이 높아보였다. 그리고 이부분에서 어느 것을 보내고 보내지 말아야 할 지 헷갈렸다.
자식컴포넌트에서 하던 로직을 부모로 옮겨서 함수를 만드니 만들어진 함수만 props로 보내주면 되서 작업이 엄청 수월해졌다.

const CategoryCard = ({ value, selectedCategory, handleCategory }) => {
  return (
    <StyledCategoryCard
      onClick={() => {
        handleCategory(value.category_id);
      }}
    >
      <StyledCategoryImg alt="food" src={value.img} />
      <StyledTitle isSelected={value.category_id === selectedCategory}>
        {value.title}
      </StyledTitle>
    </StyledCategoryCard>
  );
};