[React Native / React / Javascript] 라디오버튼처럼 만들기

React에서도 <input type ='radio' /> 를 이용해서 라디오버튼을 만들 수 있다. 그러나 개발 상황에 따라 굳이 저 input radio를 사용하지 않고 내 마음대로 커스텀해서 사용하고 싶을 때가 있을 터.

 

그 때 사용하면 좋을 javascript를 소개하겠다.

 

라디오버튼 커스텀

나는 위에 두 이미지처럼 라디오 버튼 동그라미를 디자인을 커스텀 하거나, 버튼 형식처럼 하나씩 클릭되는 식으로 표현하고 싶었다.

React 에서 state 로 option 명으로 하나씩 만든다면 만들 수는 있으나 너무나도 귀찮.

 

 

import React from 'react';
import { View, Text, SafeAreaView, Pressable } from 'react-native';
import { CheckBox } from '@shared/components/CheckBox'; // 커스텀해서 만든 체크박스
import useCustomRadio from './useCustomRadio';


const CustomRadio = () => {

  const { checked, handleRadioChecked, handleRefresh } = useCustomRadio();

  return (
    <SafeAreaView>
      <View style={styles.mainContainer}>
        <Pressable onPress={() => { handleRadioChecked('option01');}} >
          <CheckBox checked={checked.option01} />
          <Text> option01 </Text>
        </Pressable>
        
        <Pressable onPress={() => { handleRadioChecked('option02');}} >
          <CheckBox checked={checked.option02} />
          <Text> option02 </Text>
        </Pressable>
        
        <Pressable onPress={() => { handleRadioChecked('option03');}} >
          <CheckBox checked={checked.option03} />
          <Text> option03 </Text>
        </Pressable>
        
      </View>
    </SafeAreaView>
  );
};

export default WalletFilterType;

위 UI 코드는 스타일 다 빼고 기본적인 프레임 코드만 옮겨 놓았다. 중요한건 Hook! 아래 코드를 잘 참고해보자.

import React, {useState} from 'react';

//우선 라디오 타입을 정해준다
export interface IRadioType {
	option01:boolean;
    option02:boolean;
    option03:boolean;
}

const useCustomRadio = () => {

    //초기값 설정
    const initChecked = {
        option01:true, //기본은 무조건 첫번째 옵션
        option02:false,
        option03:false,
    }

	const [checked, setChecked] = useState<IRadioType>(initChecked);
	
    // IRadioType 에 설정한 옵션별로 해당 옵션 누를 때 체크
    const handleRadioChecked = (key:string) => {
        setChecked((prev:IRadioType)=>{
            return Object.entries(prev).reduce((obj, arr) => ({ ...obj, [arr[0]]: arr[0] === key }), {});
        });	
    }
    
    // 리프레시 버튼 있을 시 사용
    const handleRefresh = () => {
   		setChecked(initChecked);
    }
    
    return { checked, handleRadioChecked, handleRefresh };

}

export default useCustomRadio;

 

여기서 포인트는 아래 코드다.

참고~

 

return Object.entries(prev).reduce((obj, arr) => ({ ...obj, [arr[0]]: arr[0] === key }), {});