개발/react-native
[React-Native] Checkbox 커스텀하기
JH._.kim
2025. 3. 18. 20:18
expo로 리액트 네이티브 프로젝트를 개발하면서 체크박스 컴포넌트를 만들어야 했다.
하지만 리액트 네이티브 공식문서를 확인해보니 리액트 네이티브의 체크박스는 지원이 종료되었고,
라이브러리로 구현해야 하는데 마침 expo에도 expo-checkbox 라는 라이브러리가 있어서
이걸 사용해서 체크박스를 구현하려고 했다.
그러나 expo-checkbox도 디자인을 완벽하게 마음대로 커스텀 할 수는 없어서,
결국 완전히 처음부터 만들기로 했다.
import { useEffect, useCallback, useState } from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import Icon from './Icon';
import styles from './styles';
type Props = {
value: boolean;
label?: string;
onValueChange: (value: boolean) => void;
};
const Checkbox = ({ value, label, onValueChange }: Props) => {
const [checked, setChecked] = useState<boolean>(false);
const handleToggle = useCallback(() => {
setChecked(!checked);
onValueChange(!checked);
}, [checked, onValueChange]);
useEffect(() => {
if (value !== undefined) {
setChecked(value);
}
}, [value]);
return (
<TouchableOpacity activeOpacity={1} onPress={handleToggle} style={styles.container}>
<View style={styles.checkbox}>
<Icon name={checked ? 'active' : 'default'} width={20} height={20} />
</View>
{label && (<Text>{label}</Text>)}
</TouchableOpacity>
);
};
export default Checkbox;
TouchableOpacity 안에 별도로 만든 아이콘 컴포넌트와 label 역할을 할 Text 컴포넌트를 넣어주었다.
아이콘은 checked 상태에 따라서 체크된 아이콘과 기본 아이콘이 전환되며 나올 수 있도록 했다.
그리고 TouchableOpacity의 onPress 이벤트로 체크박스가 토글되는 것 처럼 구현했다.
728x90