React provider와 context

`<SnaProvider>`

Signature

<SnaProvider connection?: SnaConnection snaUrl?: string authToken?: string sessionId?: string hydrate?: boolean>
  {children}
</SnaProvider>

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	required	SNA context를 받을 subtree입니다.
`connection`	`{ baseUrl: string; authToken?: string }`	none	SDK launcher가 반환한 connection object입니다. 보호된 embedded SNA에서는 token과 URL이 함께 유지되도록 이 값을 우선 사용합니다.
`snaUrl`	`string`	auto-discovery	SNA internal API server URL입니다. 생략하면 host app의 `/api/sna-port`를 먼저 조회하고, 실패하면 `http://localhost:3099`를 사용합니다.
`authToken`	`string`	none	Custom deployment용 token override입니다. SDK가 server를 시작하지 않은 보호 서버에서는 `snaUrl`과 함께 사용합니다.
`sessionId`	`string`	`default`	subtree의 기본 session ID입니다.
`hydrate`	`boolean`	`true`	mount 시 chat store가 저장된 session/message를 가져올지 결정합니다. Chat store를 쓰지 않으면 `false`로 둘 수 있습니다.

Example

import { SnaProvider } from "@sna-sdk/react/components/sna-provider";

export function Root({ children }: { children: React.ReactNode }) {
  return <SnaProvider connection={sna.connection}>{children}</SnaProvider>;
}

Output

SnaProvider 자체는 UI를 렌더링하지 않습니다. React context에 { apiUrl, authToken, sessionId }를 넣고, 필요하면 useChatStore를 hydrate합니다. Discovery route는 { baseUrl, authToken } 또는 { port, authToken }을 반환할 수 있습니다. 이 route는 신뢰된 host app route로만 노출하는 편이 안전합니다.

`<SnaSession>`

Signature

<SnaSession id="review-panel">
  {children}
</SnaSession>

Props

Prop	Type	Required	Description
`id`	`string`	yes	descendant hook이 사용할 session ID입니다.
`children`	`React.ReactNode`	yes	session scope가 적용될 subtree입니다.

Example

<SnaProvider>
  <SnaSession id="default"><MainChat /></SnaSession>
  <SnaSession id="review"><ReviewAssistant /></SnaSession>
</SnaProvider>

Notes

API URL은 parent provider 값을 재사용합니다.
session ID만 subtree 단위로 바꿉니다.

`useSnaContext()`

Signature

const context = useSnaContext(): { apiUrl: string; authToken?: string; sessionId: string }

Returns

Field	Description
`apiUrl`	현재 SNA server base URL입니다.
`authToken`	hook과 chat store가 사용할 token입니다.
`sessionId`	현재 subtree의 active session ID입니다.

Example

function DebugInfo() {
  const { apiUrl, sessionId } = useSnaContext();
  return <pre>{JSON.stringify({ apiUrl, sessionId }, null, 2)}</pre>;
}

React provider와 context

React provider와 context

<SnaProvider>

<SnaSession>

useSnaContext()

목차

`<SnaProvider>`

`<SnaSession>`

`useSnaContext()`