컴포넌트 외부에서 Props로 데이터 받기 vs 컴포넌트 내부에서 데이터 fetch하기

부모 자식이 모두 서버컴포넌트일 때 부모가 데이터를 fetch하고 자식에게 props로 전달해 주는것과, 자식 컴포넌트 내부에서 데이터를 fetch하는것 중 어떤것이 확장성과 재사용성에 있어 더 좋은 컴포넌트인가요? 아래 코드에서 MyLikes는 내가 찜한 아이템, MyComments는 내가 작성한 댓글을 보여주는 컴포넌트 입니다. 처음엔 컴포넌트가 너무 구체적인 정보를 다루면 재사용성과 확장성이 떨어진다고 들어 외부에서 props로 전달하는 방식으로 만들었습니다. 그런데 MyLikes, MyComments는 내가 찜 한 아이템 데이터, 내가 작성한 댓글을 보여준다는 역할이 명확환 컴포넌트들이기 때문에 이미 구체적인 컴포넌트가 되었다고 생각됩니다. 이런 경우 이미 확장성, 재사용성이 떨어지기 떄문에 어떤 방식으로 데이터를 가져오던지 상관이 없는걸까요?

1// 부모가 Props으로 전달하는 경우
2const MyPage = async () => {
3  const token = new Token(new Cookie()).allToken;
4  const myComments = (await getMyComments(token)).payload.commentsWithEvents;
5  const myLikes = (await getMyLikes(token)).payload.data
6
7  return (
8    <div className="flex flex-col max-w-[1200px] px-4 w-full items-center gap-10 my-[100px]">
9        <MyLikes likes={myLikes} />
10        <MyComments comments={myComments} />
11    </div>
12  );
13};
14
15
16// 자식 컴폰넌트가 각각 fetch하는 경우
17const MyPage = async () => {
18  return (
19    <div className="flex flex-col max-w-[1200px] px-4 w-full items-center gap-10 my-[100px]">
20        <MyLikes />
21        <MyComments />
22    </div>
23  );
24};
25
26
27const MyLikes = async () => {
28  const token = new Token(new Cookie()).allToken;
29  const myLikes = (await getMyLikes(token)).payload.data
30
31  return (
32    <div> (중략) </div>
33  );
34};
35
36const MyComments= async () => {
37  const token = new Token(new Cookie()).allToken;
38  const myComments = (await getMyComments(token)).payload.commentsWithEvents;
39
40  return (
41    <div> (중략) </div>
42  );
43};

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 11

보충이 필요해요 0

익명님의 질문