React Native에서 체크박스(Checkbox)를 표시하는 방법 완벽 가이드

체크박스는 UI 개발에서 가장 자주 사용되는 컴포넌트 중 하나입니다. React Native에서도 멋진 방식으로 체크박스를 구현할 수 있는데요, 이 글에서는 그 방법을 단계별로 자세히 알아보겠습니다.

react-native-paper 패키지 설치

React Native의 핵심 패키지에는 기본적으로 체크박스 기능이 포함되어 있지 않습니다. 따라서 체크박스를 사용하려면 별도의 패키지를 설치해야 합니다.

가장 널리 사용되는 방법은 react-native-paper 패키지를 설치하는 것입니다. 아래 명령어를 실행하세요.

npm install --save-dev react-native-paper

기본 체크박스 컴포넌트

패키지 설치가 완료되면 다음과 같은 기본 형태로 체크박스 컴포넌트를 사용할 수 있습니다.

<Checkbox status={checkboxstatus} onPress={onCheckboxCheckedfunc} />

주요 Props 정리

체크박스 컴포넌트에서 자주 사용되는 주요 속성(props)은 다음과 같습니다.

useState로 체크박스 상태 관리하기

체크박스의 선택 여부를 관리하려면 React의 useState 훅을 활용합니다. 아래 코드처럼 checked 변수에 상태를 저장하고, setChecked 함수로 상태를 업데이트합니다.

const [checked, setChecked] = React.useState(false);

사용자가 체크박스를 클릭할 때마다 onPress 이벤트 핸들러를 통해 상태가 반전되도록 구현할 수 있습니다.

onPress={() => {
    setChecked(!checked);
}}

전체 예제 코드

지금까지 설명한 내용을 모두 포함한 완전한 코드는 다음과 같습니다.

Example

import * as React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
import { Checkbox } from 'react-native-paper';
const MyComponent = () => {
    const [checked, setChecked] = React.useState(false);
    return (
        <SafeAreaView style={styles.container}>
            <Checkbox
                status={checked ? 'checked' : 'unchecked'}
                onPress={() => {
                    setChecked(!checked);
                }}
                color={'green'}
                uncheckColor={'red'}
            />
            <Text>Checkbox</Text>
        </SafeAreaView>
    );
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
});
export default MyComponent;

Output

위 코드를 실행하면 화면 중앙에 초록색(선택 시)과 빨간색(미선택 시)으로 표시되는 체크박스가 나타나며, 클릭할 때마다 상태가 전환됩니다.

이처럼 react-native-paper를 활용하면 몇 줄의 코드만으로 스타일링된 체크박스를 손쉽게 구현할 수 있습니다. status, color 등의 속성을 조합하여 앱의 디자인에 맞게 자유롭게 커스터마이징해 보세요.