[Next.js] Shared Component

원티드 프리온보딩 챌린지 "Next.js 확실히 알고 레벨업 하기" 3일차 내용 정리

 

Shared Component

상황에 따라 RSC(React Server Component)나 RCC(React Client Component)로 동작하는 컴포넌트.

RSC에서 import하면 RSC로 동작하고, RCC에서 import하면 RCC로 동작한다.

 

아래에 코드 예시가 있다.

RSC, RCC의 코드 예시는 이전 게시물 참고. (https://doringri.tistory.com/231)

interface Props {
    text: string;
}

export function Shared({text}: Props): Element {
    return <span>{text}</span>;
}

 

RSC에서 Shared Component를 import하여 사용할 수 있다.

export async function RSC(): Promise<Element> {
    return (
        <div>
            <Shared text="hello"/>
        </div>
    )
}

이것을 빌드해보면 RSC로서 동작하는 것을 알 수 있다.

빌드 결과물을 보면, span 태그가 번들에 생성되었기 때문.

하지만 RCC에서 import했을 경우 span 태그가 생성되지 않는다. (번들에 filename으로 표시만 됨)

 

 

RSC의 규칙

최대한 RCC를 줄이고 Shared Component를 만든다.

예시 : 데이터를 뷰에 보여주는 Shared Component를 만들고, 어떤 페이지(상호작용 불필요)에서는 서버 사이드에서, 어떤 페이지(상호작용 필요)에서는 클라이언트 사이드에서 동작하도록 한다.

 

 

React Tree

RSC에서는 RCC를 import할 수 있다.

RCC에서 RSC를 import할 수는 없지만, children, 즉 props로서 전달할 수는 있다.