Appearance

연락처 가져오기 ​

fetchContacts ​

fetchContacts 는 사용자의 연락처 목록을 페이지 단위로 가져오는 함수예요.

시그니처 ​

typescript
function fetchContacts(params: {
  size: number;
  offset: number;
  query?: {
    contains?: string;
  };
}): Promise<{
  result: ContactEntity[];
  nextOffset: number | null;
  done: boolean;
}>;

파라미터 ​

  • size필수

    한 번에 가져올 연락처 개수예요. 예를 들어, 10을 전달하면 최대 10개의 연락처를 가져와요.

  • offset필수

    가져올 연락처의 시작 지점이에요. 처음 호출할 때는 0을 전달해야 해요. 이후에는 이전 호출에서 반환된 nextOffset 값을 사용해요.

  • query필수

    추가적인 필터링 옵션이에요.

    • query.contains필수

      이름에 특정 문자열이 포함된 연락처만 가져오고 싶을 때 사용해요. 이 값을 전달하지 않으면 모든 연락처를 가져와요.

반환 값 ​

  • Promise<{result: { name: string; phoneNumber: string }[]; nextOffset: number | null; done: boolean}>

연락처 목록과 페이지네이션 정보를 포함한 객체를 반환해요.

  • result: 가져온 연락처 목록이에요.
  • nextOffset: 다음 호출에 사용할 오프셋 값이에요. 더 가져올 연락처가 없으면 null이에요.
  • done: 모든 연락처를 다 가져왔는지 여부를 나타내요. 모두 가져왔다면 true예요.

예제 ​

특정 문자열이 포함된 연락처 목록 가져오기 ​

tsx
import { fetchContacts, ContactEntity } from '@apps-in-toss/web-framework';
import { Text, Button } from '@toss-design-system/mobile';
import { useState } from 'react';

// 특정 문자열을 포함한 연락처 목록을 가져와 화면에 표시하는 컴포넌트
function ContactsList() {
  const [contacts, setContacts] = useState<{
    result: ContactEntity[];
    nextOffset: number | null;
    done: boolean;
  }>({
    result: [],
    nextOffset: null,
    done: false,
  });

  async function handlePress() {
    try {
      if (contacts.done) {
        console.log('모든 연락처를 가져왔어요.');
        return;
      }

      const response = await fetchContacts({
        size: 10,
        offset: contacts.nextOffset ?? 0,
        query: { contains: '김' },
      });
      setContacts((prev) => ({
        result: [...prev.result, ...response.result],
        nextOffset: response.nextOffset,
        done: response.done,
      }));
    } catch (error) {
      console.error('연락처를 가져오는 데 실패했어요:', error);
    }
  };

  return (
    <div>
      {contacts.result.map((contact, index) => (
        <Text key={index}>
          {contact.name}: {contact.phoneNumber}
        </Text>
      ))}
      <Button size="medium" onClick={handlePress} disabled={contacts.done}>
        {contacts.done ? '모든 연락처를 가져왔어요.' : '다음 연락처 가져오기'}
      </Button>
    </div>
  );
}
tsx
import { fetchContacts, ContactEntity } from '@apps-in-toss/framework';
import { Button, Text } from '@toss-design-system/react-native';
import { useState } from 'react';
import { View } from 'react-native';

// 특정 문자열을 포함한 연락처 목록을 가져와 화면에 표시하는 컴포넌트
function ContactsList() {
  const [contacts, setContacts] = useState<{
    result: ContactEntity[];
    nextOffset: number | null;
    done: boolean;
  }>({
    result: [],
    nextOffset: null,
    done: false,
  });

  async function handlePress() {
    try {
      if (contacts.done) {
        console.log('모든 연락처를 가져왔어요.');
        return;
      }

      const response = await fetchContacts({
        size: 10,
        offset: contacts.nextOffset ?? 0,
        query: { contains: '김' },
      });
      setContacts((prev) => ({
        result: [...prev.result, ...response.result],
        nextOffset: response.nextOffset,
        done: response.done,
      }));
    } catch (error) {
      console.error('연락처를 가져오는 데 실패했어요:', error);
    }
  };

  return (
    <View>
      {contacts.result.map((contact, index) => (
        <Text key={index}>{contact.name}: {contact.phoneNumber}</Text>
      ))}
      <Button disabled={contacts.done} onPress={handlePress}>
        {contacts.done ? '모든 연락처를 가져왔어요.' : '다음 연락처 가져오기'}
      </Button>
    </View>
  );
}