연락처 목록 앱 만들기
SectionList, 알파벳순 섹션 헤더, 검색 필터, 당겨서 새로 고침을 조합해 부드러운 스크롤 성능을 갖춘 실제적인 연락처 화면을 만듭니다.
연락처 목록 앱 만들기은(는) CoddyKit의 무료 React Native Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Native Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
앱 개요: 연락처 목록
이 레슨에서는 FlatList와 SectionList 레슨에서 배운 모든 내용을 결합한 실제적인 연락처 목록 화면을 만듭니다. 앱은 연락처를 알파벳순으로 그룹화해 표시하고, 검색 필터를 지원하며, 당겨서 새로 고침을 제공하고, 수백 개의 항목이 있어도 매끄러운 성능을 유지합니다.
연락처 데이터 정의하기
먼저 연락처 객체의 정적 배열을 만드세요. 실제 앱에서는 기기의 연락처 API나 원격 서버에서 가져오게 됩니다. 각 연락처에는 id, name, phone이 있습니다. keyExtractor를 사용하려면 고유한 숫자 또는 문자열 ID가 반드시 필요합니다.
const CONTACTS = [
{ id: '1', name: 'Alice Brown', phone: '+1-555-0101' },
{ id: '2', name: 'Andrew Chen', phone: '+1-555-0102' },
{ id: '3', name: 'Bob Davis', phone: '+1-555-0201' },
{ id: '4', name: 'Carol Evans', phone: '+1-555-0301' },
// ... more contacts
];검색 필터 상태
searchQuery 상태 변수를 추가하고 그룹화하기 전에 연락처 배열을 필터링하세요. 필터는 대소문자를 구분하지 않고 일치시키기 위해 검색어와 연락처 이름을 모두 소문자로 변환합니다. 필터링과 그룹화를 useMemo로 감싸 연락처나 검색어가 변경될 때만 다시 계산되도록 하세요.
const [searchQuery, setSearchQuery] = useState('');
const filteredContacts = useMemo(() => {
if (!searchQuery) return CONTACTS;
return CONTACTS.filter((c) =>
c.name.toLowerCase().includes(searchQuery.toLowerCase())
);
}, [searchQuery]);연락처를 알파벳순으로 그룹화하기
필터링된 평면 배열을 SectionList 섹션 형식으로 변환하세요. 첫 글자를 키로 사용하는 맵으로 연락처를 줄인 다음, 키를 정렬하고 섹션 객체로 매핑합니다. 이 변환은 필터와 함께 useMemo 안에서 실행되어 하나의 계산된 값을 만듭니다.
const sections = useMemo(() => {
const map = filteredContacts.reduce((acc, contact) => {
const letter = contact.name[0].toUpperCase();
if (!acc[letter]) acc[letter] = [];
acc[letter].push(contact);
return acc;
}, {});
return Object.keys(map).sort().map((key) => ({
title: key,
data: map[key],
}));
}, [filteredContacts]);검색창 구성 요소
SectionList 위에 TextInput을 ListHeaderComponent로 렌더링하면 목록과 함께 스크롤됩니다. onChangeText를 사용해 이를 searchQuery 상태에 연결하세요. iOS에서는 clearButtonMode 속성을 사용해 입력창 안에 네이티브 지우기 버튼을 표시할 수 있습니다.
const SearchBar = () => (
<TextInput
style={styles.searchBar}
placeholder='Search contacts...'
value={searchQuery}
onChangeText={setSearchQuery}
clearButtonMode='while-editing'
/>
);연락처 행 구성 요소
불필요한 다시 렌더링을 방지하도록 React.memo를 사용해 메모이제이션된 행 구성 요소를 만드세요. 행에는 색상이 있는 아바타 원 안에 연락처의 이니셜을 표시하고, 오른쪽에는 이름과 전화번호를 표시합니다. 수백 개의 연락처를 매끄럽게 스크롤하려면 행 구성 요소를 메모이제이션하는 것이 매우 중요합니다.
const ContactRow = React.memo(({ item }) => (
<View style={styles.row}>
<View style={styles.avatar}>
<Text style={styles.initials}>{item.name[0]}</Text>
</View>
<View>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.phone}>{item.phone}</Text>
</View>
</View>
));섹션 헤더 구성 요소
알파벳 섹션 헤더는 문자가 표시된 간단한 View입니다. 사용자가 각 문자 그룹을 스크롤할 때 계속 보이도록 구분되는 배경색과 고정 동작을 적용하세요. 문자마다 한 번씩 렌더링되므로 구성 요소를 작고 메모이제이션된 상태로 유지하세요.
const SectionHeader = ({ section }) => (
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>{section.title}</Text>
</View>
);당겨서 새로 고침 통합하기
refreshing 상태를 도입해 새로 고침을 시뮬레이션하세요. 새로 고칠 때 검색어를 지워 사용자가 모든 연락처를 다시 보게 하고, 네트워크 호출을 시뮬레이션하기 위해 잠시 기다린 다음 refreshing을 false로 설정합니다. 실제 앱에서는 기기의 연락처 API나 서버에서 데이터를 다시 가져오게 됩니다.
const [refreshing, setRefreshing] = useState(false);
const onRefresh = () => {
setRefreshing(true);
setSearchQuery('');
setTimeout(() => setRefreshing(false), 1000);
};결과가 없을 때의 빈 상태
필터링된 섹션 배열이 비어 있으면(검색어와 일치하는 연락처가 없으면) ListEmptyComponent를 사용해 안내하는 빈 상태를 표시하세요. 사용자에게 검색어와 일치하는 연락처가 없다고 알리고 검색어를 지워 보도록 안내합니다. 빈 화면만 표시하는 것보다 훨씬 좋습니다.
const ListEmpty = () => (
<View style={styles.empty}>
<Text>No contacts found for '{searchQuery}'</Text>
<Button title='Clear Search' onPress={() => setSearchQuery('')} />
</View>
);전체 화면 조립하기
모든 요소를 결합하세요. 섹션 데이터가 있는 SectionList, 메모이제이션된 renderItem, renderSectionHeader, keyExtractor, 고정 헤더, 당겨서 새로 고침, 검색창을 위한 ListHeaderComponent를 포함합니다. 그 결과 실제 서비스 수준의 연락처 화면이 완성됩니다.
export default function ContactsScreen() {
return (
<SectionList
sections={sections}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <ContactRow item={item} />}
renderSectionHeader={({ section }) => <SectionHeader section={section} />}
stickySectionHeadersEnabled
refreshing={refreshing}
onRefresh={onRefresh}
ListHeaderComponent={SearchBar}
ListEmptyComponent={ListEmpty}
/>
);
}연락처 상세 화면으로 이동하기
ContactRow를 TouchableOpacity로 감싸고 navigation.navigate('ContactDetail', { contactId: item.id })을 호출해 각 행을 탭할 수 있게 만드세요. 상세 화면은 route.params에서 ID를 읽고 전체 연락처 데이터를 가져옵니다. 이는 앞에서 배운 React Navigation 패턴을 따릅니다.
const ContactRow = React.memo(({ item, onPress }) => (
<TouchableOpacity onPress={() => onPress(item)} style={styles.row}>
<View style={styles.avatar}>
<Text style={styles.initials}>{item.name[0]}</Text>
</View>
<View>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.phone}>{item.phone}</Text>
</View>
</TouchableOpacity>
));빠른 확인
이 레슨에서 배운 연락처 목록 앱 아키텍처에 대한 이해도를 테스트해 보세요.
레슨 요약
이 레슨에서는 효율적인 연락처 화면을 위해 SectionList, 검색 필터링, useMemo 결합하기, 스크롤 성능을 유지하도록 React.memo로 행 구성 요소 메모이제이션하기, 완성도 높은 사용자 경험을 위해 당겨서 새로 고침과 빈 상태 통합하기를 배웠습니다. 다음에는 useRef 훅과 변경 가능한 값을 자세히 살펴봅니다.
AI 튜터와 함께 JavaScript을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 30
- 레슨
- 120
자주 묻는 질문
“연락처 목록 앱 만들기” 강의는 무료인가요?
네 — “연락처 목록 앱 만들기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Native Academy 강의 전체를 잠금 해제할 수 있습니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“연락처 목록 앱 만들기”에서 뭘 배우나요?
SectionList, 알파벳순 섹션 헤더, 검색 필터, 당겨서 새로 고침을 조합해 부드러운 스크롤 성능을 갖춘 실제적인 연락처 화면을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 React Native Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
React Native Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 React Native Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“연락처 목록 앱 만들기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 React Native Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 React Native Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.