230216 팀프로젝트 8

오늘은 params 나눠주는 것을 공부했고...!
뭔가 프로젝트하면서 params를 쓸일이 없었는데(근데 진짜 생각해보니까 뭐 제대로 해본게 없는 것같네...? 근데 안써본게 너무 많다...ㅜㅜ;;;;;;) 이번 프로젝트에서... 써봤다...ㅎㅎ

param을 사용하는 이유는 간단하다
파이어스토어에 있는 post(컬렉션명)의 id 값을 받아 비교하고 그 값을 각자의 자리에 착착 주차시켜줘야하기 때문이다...ㅋㅋㅋㅋㅋㅋ
전체값을 받아와서 대부분의 값을 넣어주기 때문에 만약 일부 값만 받아서 진행한다면 로직을 변경해주는 것이 좋다.
나의 경우는 진짜 모든 정보를 가져와서 나눠줘야하기 때문에!
그런거라...
그렇다...
뭔가 params만 들으면 벌벌 떨고 있는데 param은 결국 parameter의 약자로 매개변수의 키 혹은 값을 넘겨줄때 유용하게 쓴다는거다.

const Router = () => {
return (
    <BrowserRouter>
      <Header />
      <Routes>
      // params를 넘겨주기 위해 :id 추가
        <Route path="/matedetail/:id" element={<MateDetail />} />
      </Routes>
    </BrowserRouter>
  );
  }

import { useParams } from 'react-router-dom';

// getDoc 사용 doc
 const { id } = useParams()
 
 //useEffect에선 async사용할 수 없음
 // 따라서 따로 빼고 그 값을 useEffect에 넣어주는게 맞음
  const getPost = async () => {
    const q = doc(db, 'post', id);
    const postData = await getDoc(q);
    //비동기
    setpost(postData.data());
  };
  
  useEffect(() => { getPost();
  }, []);}
  
  
  return (
   <>
      <GroupWrap>
        <GroupHeader>{post.partyPostTitile}</GroupHeader>
        <GroupUserInfo>
          <GroupImg />
          <GroupUserId>{post.nickName}</GroupUserId>
        </GroupUserInfo>
        <UserHr />
        <GroupBox>
          <GroupPerson>{post.partyDesc}</GroupPerson>
        </GroupBox>
      </GroupWrap>
    </>)

그리고 중요한거!! useParams를 사용하기 위해선 router셋팅이 되어 있어야한다.

아참 더 이용예시에 대해 궁금해서 찾아보았는데 버튼에서 onclick 이벤트를 사용하는 부분이 번거로울 때 useParams로 해결이 가능하다고 한다!