React 전용 설계

React Chat SDK 및 UI Kit

Tencent RTC의 React Chat SDK와 UI Kit을 사용해 일대일 및 그룹 메시징을 구축하세요. 서로 연결된 대화 목록, 메시지, 메시지 작성기를 추가한 후 제품에 맞게 사용자 지정하세요.

React 튜토리얼 시작 Chat 데모 체험

개발자 리소스

React Chat SDK 문서 및 예제

API 레퍼런스

React Chat SDK API와 UI Kit의 props 및 hooks를 살펴보세요.

ConversationList API MessageList API JavaScript 클라이언트 API

통합 가이드

React Chat SDK와 UI Kit을 애플리케이션에 통합하세요.

React Chat 통합 독립형 채팅 추가

예제 및 소스

React Chat SDK 소스 코드와 로컬 상품 메시지 예제를 살펴보세요.

공식 React 샘플 상품 메시지 예제

React 커뮤니티 채팅

구축커뮤니티 채팅 React Chat SDK로 일대일 메시지, 그룹 대화 및 미디어 공유를 구현하세요.

Chat 데모 체험 React 소스 코드 보기

맞춤형 제품 메시지

React Chat SDK 맞춤 메시지를 제품 카드에 연결하세요: 지원 채팅.

React 예제 받기

REACT 채팅 기능

React Chat SDK 기능

메시지 작업부터 사용자 지정 콘텐츠까지 애플리케이션에 필요한 기능을 선택하세요.

리치 메시지 유형

텍스트, 이미지, 오디오 및 동영상
대화에서 파일 공유
사용자 지정 제품 또는 주문 페이로드

유연한 구성

이미지, 동영상 및 파일 선택기
구성 가능한 입력 작업
자체 플레이스홀더 및 툴바

당신의 제품, 당신의 UI

라이트 및 다크 테마
사용자 지정 대화 미리보기
영어, 중국어, 일본어, 한국어

필요할 때 확장

읽음 확인: 활성화 및 구성
Cloud Search: 유료 플러그인
음성 및 영상: TUICallKit 추가

React Chat Components 살펴보기

대화 목록부터 메시지 작성기까지 인터페이스를 살펴보세요.

대화 목록

제품에 꼭 맞는 받은편지함

최근 메시지와 읽지 않은 메시지 수를 표시하세요. 각 대화의 표시 방식을 변경하려면 미리보기 컴포넌트를 교체하세요.

ConversationList API

<ConversationList
  style={{ width: 300, height: '100%' }}
  enableSearch={false}
/>

MessageList

메시지 작동 방식 선택

메시지 정렬을 제어하고 연속 메시지를 그룹화하며 각 메시지에서 사용할 수 있는 작업을 선택하세요.

MessageList API

const actions = useMessageActions([
  'copy', 'quote', 'forward',
]);

<MessageList
  alignment="two-sided"
  messageAggregationTime={300}
  messageActionList={actions}
/>

MessageInput

필요한 메시지 작성 도구 구축

이미지, 파일 및 동영상 선택기를 고르세요. 플레이스홀더를 설정하고 보내기 버튼의 표시 여부를 결정하세요.

MessageInput API

<MessageInput
  placeholder="Message your community"
  autoFocus={false}
  hideSendButton={false}
  actions={[
    'ImagePicker', 'FilePicker', 'VideoPicker',
  ]}
/>

ChatHeader

유용한 작업을 쉽게 이용할 수 있게 배치하세요

대화 제목 옆에 설정 컨트롤을 추가하고 자체 패널이나 탐색 메뉴에 연결하세요.

헤더 통합 가이드

const [showSettings, setShowSettings] = useState(false);

<ChatHeader
  ChatHeaderRight={
    <button onClick={() => setShowSettings(true)}>
      Settings
    </button>
  }
/>

연락처

사람과 대화 연결

연락처 목록과 프로필 세부 정보를 결합하세요. 사용자가 메시지를 시작하면 대화 보기로 다시 전환하세요.

연락처 통합 가이드

<ContactList />
<ContactInfo
  onSendMessage={() => setActiveTab('conversations')}
  onEnterGroup={() => setActiveTab('conversations')}
/>

ChatSetting

대화 설정을 위한 공간 마련

설정 컴포넌트를 사이드바나 드로어에 배치하세요. 패널을 여닫는 시점은 애플리케이션에서 제어합니다.

통합 설정 가이드

{showSettings && (
  <aside className="chat-settings">
    <ChatSetting
      onClose={() => setShowSettings(false)}
    />
  </aside>
)}

커스터마이징

React 채팅 UI 맞춤 설정

React Chat SDK 통합과 자체 콘텐츠에 맞게 UI Kit의 스타일을 설정하세요.

테마

provider에서 테마를 설정하세요. 밝은 화면과 어두운 화면을 전환해도 하나의 대화 흐름을 유지하세요.

테마 통합 가이드

시작하기

React Chat SDK 통합

01
앱 만들기
React Chat SDK 통합을 위한 Chat 애플리케이션을 만드세요.
Chat 콘솔 열기
02
React UI Kit 추가
패키지를 설치하세요. 필요에 맞게 컴포넌트를 사용자 지정하세요.
React 튜토리얼 따라 하기
03
첫 메시지 보내기
React Chat SDK 사용자 계정 2개로 로그인하고 테스트 메시지를 보내세요.
사용자 연결

React Chat UI Kit

터미널

npm install @tencentcloud/chat-uikit-react

<UIKitProvider theme="light">
  <ConversationList />
  <Chat>
    <ChatHeader />
    <MessageList />
    <MessageInput />
  </Chat>
</UIKitProvider>

CHAT + CALL

통화가 필요한 대화도 있습니다

TUICallKit과 React 채팅 헤더를 통해 음성 및 영상을 연결하세요.

통화하려면 TUICallKit 통합 및 Call 서비스 활성화가 필요합니다. Call 요금은 Chat과 별도로 확인하세요.

통화 통합 보기

React Chat SDK FAQ

React Chat SDK와 React UI Kit의 차이점은 무엇인가요?

React Chat SDK는 JavaScript SDK를 통해 메시징 기능을 제공합니다. React UI Kit는 채팅 인터페이스용 완성형 컴포넌트를 제공합니다. UI Kit의 연결된 컴포넌트로 시작하거나 기반 SDK를 사용해 자체 인터페이스를 구축하세요.

React UI Kit 살펴보기 JavaScript SDK 살펴보기

컴포넌트와 메시지 레이아웃을 사용자 지정할 수 있나요?

예. 문서화된 props와 확장 지점을 사용해 컴포넌트 동작을 구성하고, 대화 미리보기를 조정하며, 사용자 지정 메시지를 렌더링할 수 있습니다. 가능한 변경 사항은 컴포넌트마다 다르므로 교체를 계획하기 전에 해당 API를 확인하세요.

MessageList 옵션 보기 사용자 지정 메시지 구축

React 웹, 모바일 웹 또는 React Native에는 어떤 UI Kit를 사용해야 하나요?

브라우저 애플리케이션에는 React UI Kit를 사용하세요. 모바일 웹(H5) 가이드에서는 React 패키지의 ConversationListH5 및 MessageListH5 같은 컴포넌트를 사용합니다. React Native로 구축한 네이티브 iOS 및 Android 애플리케이션에는 별도의 React Native UI Kit와 네이티브 설정 가이드를 사용하세요.

React 웹 통합 React 모바일 웹 가이드 React Native UI Kit 살펴보기 React Native 설정

React Chat SDK를 Next.js 또는 SSR과 어떻게 통합하나요?

브라우저용 대화형 채팅 화면을 설계하세요. Next.js App Router에서는 브라우저 종속 코드를 Client Component로 분리하세요. Next.js는 ssr: false를 통한 클라이언트 전용 동적 로딩을 지원합니다. 서버에서 UserSig를 생성하세요. 설치된 UI Kit 버전과 종속성을 확인하고 출시 전에 프로덕션 빌드, 로그인, 탐색을 테스트하세요.

Next.js 클라이언트 전용 로딩 React 통합 요구 사항

오픈 소스 React UI Kit은 호스팅형 Chat 서비스와 어떤 관계인가요?

React UI Kit 소스 코드는 GitHub에서 제공됩니다. 연결형 메시징 컴포넌트는 Tencent RTC Chat을 사용하며 Chat 애플리케이션과 인증된 사용자가 필요합니다. 컴포넌트 소스 코드 제공에 무제한 호스팅 메시징은 포함되지 않습니다. 서비스 사용량과 기능 이용 범위는 Chat 요금제를 따릅니다. 실시간 연결 없이도 로컬 UI 미리보기를 실행할 수 있습니다.

React UI Kit 소스 코드 Chat 요금제 세부 정보 서비스 비용 산정

React Chat SDK를 무료로 시작할 수 있나요?

Tencent RTC Chat은 월간 활성 사용자 1,000명이 포함된 무료 요금제를 제공합니다. 필요한 기능과 사용량에 맞는 요금제 세부 정보 및 가격을 확인하세요.

Free Plan 보기 비용 예측

React UI Kit에 음성 및 영상 통화가 포함되어 있나요?

TUICallKit을 통합하고 Call 서비스를 활성화하여 통화 기능을 추가할 수 있습니다. 현재 전체 React 통합 예제에는 이 확장 기능이 포함되어 있지만, 통화 설정과 요금은 메시징과 별도로 적용됩니다.

통화 통합 보기

무료 요금제에 Cloud Search가 포함되어 있나요?

Cloud Search는 Cloud Search 플러그인이 필요한 부가 기능입니다. 채팅 인터페이스에서 검색을 활성화하기 전에 요구사항을 확인하세요.

React 통합 가이드 보기

React 프로젝트에 React Chat SDK를 통합하려면 어떻게 해야 하나요?

문서화된 provider를 초기화하고 연결된 컴포넌트를 구성하세요. 구독과 정리를 React 수명 주기에 맞추고 실제 앱에서 탐색과 반복 마운트를 테스트하세요.

앱 출시 전에 React Chat SDK를 어떻게 테스트하나요?

로그인, SDK 준비 상태, 송수신 이벤트, 재연결 후 메시지 상태를 확인하세요.

React Chat SDK의 인터페이스를 어떻게 맞춤 설정하나요?

채팅 컴포넌트를 UIKitProvider로 감싸고 theme="light" 또는 theme="dark"를 설정하세요. 하위 컴포넌트는 useUIKit().setTheme으로 표시 테마를 바꿀 수 있으며, 이 hook은 provider 컨텍스트 안에서 호출해야 합니다. 상품 카드에는 MessageList.messageRenderers를 통해 사용자 정의 메시지 렌더러를 제공하세요. 인식하지 못하는 페이로드를 위한 기본 표시를 유지하고 상품 조회와 결제 절차는 애플리케이션에서 처리하세요. 이러한 기능은 Chat에 기본으로 포함되지 않습니다.

맞춤 설정 가이드 보기

다음 단계에 적합한 지원 찾기

기술 문의

React Chat SDK 샘플을 확인하거나 재현 가능한 문제를 신고하세요.

GitHub Issues 보기

제품 및 요금 문의

애플리케이션, 예상 사용량 및 연동 요구 사항을 팀과 상담하세요.

판매원에게 연락하기

다음 대화는 여기서 시작됩니다

React Chat SDK와 UI Kit로 구축하세요. 월간 활성 사용자 1,000명까지 무료로 시작할 수 있습니다.

무료로 시작하기 React 튜토리얼 시작