인프런 커뮤니티 질문&답변

Chris Joo님의 프로필 이미지

작성한 질문수

Next + React Query로 SNS 서비스 만들기

RQProvider 하위의 컨포넌트는 모두 Client component인가요?

해결된 질문

24.07.15 12:22 작성

·

155

0

"use client";

하위의 컴포넌트는 Client로 랜더링 된다고 하신거 같은데,

QueryClientProvider가 client에서 랜더링 되는건 아닌가요?

해당 파일을 가보니 'use client'를 사용하고 있어서요.

<QueryClientProvider></QueryClientProvider>로 감싸도 그 하위에 컴포넌트들이 SSR가 되는지 궁금합니다.

 

'use client'
import * as React from 'react'

import type { QueryClient } from '@tanstack/query-core'

export const QueryClientContext = React.createContext<QueryClient | undefined>(
  undefined,
)

export const useQueryClient = (queryClient?: QueryClient) => {
  const client = React.useContext(QueryClientContext)

  if (queryClient) {
    return queryClient
  }

  if (!client) {
    throw new Error('No QueryClient set, use QueryClientProvider to set one')
  }

  return client
}

export type QueryClientProviderProps = {
  client: QueryClient
  children?: React.ReactNode
}

export const QueryClientProvider = ({
  client,
  children,
}: QueryClientProviderProps): React.JSX.Element => {
  React.useEffect(() => {
    client.mount()
    return () => {
      client.unmount()
    }
  }, [client])

  return (
    <QueryClientContext.Provider value={client}>
      {children}
    </QueryClientContext.Provider>
  )
}

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 07. 15. 12:29

import한 컴포넌트들만 클라이언트 컴포넌트가 되고 props로 전달한 서버컴포넌트는 그대로 서버컴포넌트로 유지됩니다.

Chris Joo님의 프로필 이미지
Chris Joo
질문자

2024. 07. 15. 12:38

모든 하위 컴포넌트가 클라이언트 컴포넌트가 되는것이 아닌,
"use client"; 가 선언된 파일을 임포트한 컴포넌트가 클라이언트 컴포넌트가 된다는 말씀이신가요?

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 07. 15. 12:50

아뇨 'use client'가 선언된 컴포넌트(클라이언트 컴포넌트)가 import한 모든 컴포넌트가 client 컴포넌트가 됩니다.

 

Chris Joo님의 프로필 이미지
Chris Joo
질문자

2024. 07. 15. 12:56

아 이해했습니다. 감사합니다^^