230215 팀프로젝트 7

오늘 댓글 부분을 만들다가 카드 컴포넌트의 값을 담아 전체리스트로 뿌려주는 부분을 했다.
아무래도 다른 사람들과 연동되는 부분이다보니...! 댓글보단 급한 상황이기 때문에 댓글을 미루고 했다.

이 부분은 list라는 부모 컴포넌트에 해당되는 부분에 snapshot을 사용하여 값을 전달, 카드 컴포넌트(공용)에 props를 내려주어 db에 있는 값을 전달할 수 있도록 진행했다.

// 전체 리스트 영역
const MateList = () => {
  const [cardAll, setCardAll] = useState([]);
  const testArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];

// 비동기를 사용, db에서 post(컬렉션명)의 값을 가져온다.
  const getPostData = async () => {
    const postCollectionRef = collection(db, 'post');

    const q = query(postCollectionRef);
    // collection
    const getPost = onSnapshot(q, (snapshot) => {
      const data = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setCardAll(data);
    });
  };

// useEffect를 따로 빼서도 작성 가능.
  useEffect(() => {
    getPostData();
  }, []);

  return (
    <>
      {/* 필터 & 정렬 */}
      <ViewOptions>
        <FilterBox>
          <FilterTech />
          <FilterLocation />
          <FilterTime />
          <FilterNumOfMember />
        </FilterBox>
        <SortBox>
          <SortByRecommend>북마크순</SortByRecommend>
          <SortByNew>최신순</SortByNew>
        </SortBox>
      </ViewOptions>

      {/* 카드 리스트 */}
      <CardListContainer>
        <CardList>
        // map 메소드를 사용하여 카드(공용 컴포넌트)영역에 값을 삽입, 반복할 수 있도록 함수를 짠다.
          {cardAll.map((item) => (
            <CardSection item={item} />
          ))}
        </CardList>
      </CardListContainer>

      {/* 페이지 */}
      <PaginationContainer>
        <Pagination defaultCurrent={6} total={500} />
      </PaginationContainer>
    </>
  );
};

// 카드 영역
// item이라는 이름의 props를 뿌려주어 각 영역에 해당하는 데이터값을 전달한다.
const CardSection = ({ item }) => {
  return (
    <PostCard>
      <BookmarkIconBox>
        <Location>{item.partyLocation}</Location>
        <BsBookmarkHeart cursor="pointer" size="20px" />
      </BookmarkIconBox>

      <PostBox>
        <PostTitle>{item.partyPostTitile}</PostTitle>
        <PostDesc>{item.partyDesc}</PostDesc>
        <TechStackIcon></TechStackIcon>
      </PostBox>

      <PartyStatusBox>
        <RecruitingBox>
          <BsPower color="green" size="15px" />
          <Recruiting>{item.partyIsOpen}</Recruiting>
        </RecruitingBox>
        <HeadCountBox>
          <BsPeopleFill size="15px" />
          <HeadCount>{item.partyNum}</HeadCount>
        </HeadCountBox>
      </PartyStatusBox>

      <HorizontalLine />

      <PostInfo>
        <ProfileBox>
          <ProfileImage></ProfileImage>
          <NickName>{item.nickName}</NickName>
        </ProfileBox>
        <InfoBox>
          <GrFormView size="24px" />
          <PostView>12</PostView>
          <FaRegCommentDots size="15px" />
          <PostComments>3</PostComments>
        </InfoBox>
      </PostInfo>
    </PostCard>
  );
};

export default CardSection;

처음엔 값을 어떻게 전달하는지에 대해서 망설임이 많았고 첫걸음을 떼기가 어려웠는데, 설명을 들어보니 엄청 어려움이 없는 작업이었다.

json이나 더미 데이터가 아닌 파이어베이스에서 값을 가져오는 것이다보니 파베를 사용하지 않는다면 금방 잊을 가능성이 크지만 이번에도 파이어베이스에 대해서 많이 배울 수 있었다:)!!!

++ 의존성배열이 왜 비여져있을까? 라고 생각할 수 있는데 useEffect에서 실행되고 있는 데이터는 변화되는 데이터를 받아올 때 실행할 수 있도록 빈 배열로 두는 것이 맞다고 한다.
의존성 배열이 없다면 페이지가 렌더링 될 때마다 데이터를 계속 가져와야하기 때문에.... 어떻게 보면 비효율적이기도 하고!! 없으면 지옥문이 열리는 요소중 하나인듯 하다....;)

틀렸을 경우 수정..수정하겠음...:)