React 앱에서 인기있는 antd 라이브러리에서 checkboxradio 컴포넌트 사용 방법에 대하여 알아봅니다.



# react antd 컴포넌트 checkbox, radio
react에서는 매우 자주 사용되는 antd 라이브러리에서 checkbox와 radio 컴포넌트는 입력폼을 작성할 때 자주 사용됩니다. 먼저 간단한 사용 방법은 아래와 같습니다. 아래 예제는 RadioCheckbox를 각각 적용하였습니다.

! 체크 상태 on / off 적용하기
먼저 체크 상태를 표시하기 위해서 checked 프로퍼티를 아래와 같이 설정합니다.
<Checkbox checked={false} />

그리고 onChange를 사용하여 값이 변경된 경우 해당하는 함수를 호출하여 새로운 값으로 업데이트를 합니다.
import { Radio, Checkbox } from 'antd';

export default () => {
  const onChangeCheckbox = function(e) {
    const checked = e.target.checked;
    if (checked ) {
      ...
    }
    else {
      ...
    }
  };

  const onChangeRadio = function(e) {
    const checked = e.target.checked;
    if (checked ) {
      ...
    }
    else {
      ...
    }
  };

  return (
    <div>
      <Checkbox
        checked={false}
        onChange={onChangeCheckbox} />
      <Radio
        checked={false}
        onChange={onChangeRadio} />
    </div>
  )
};

여기서 체크 여부를 확인하기 위해서 아래와 같은 코드를 사용했습니다.
const checked = e.target.checked;

e는 이벤트 객체이여 e.target.checked를 사용하여야 현재 체크 여부를 확인하여 boolean으로 반환합니다. 다시 말해 체크 여부를 확인하기 위해서는 e.target.checked를 사용하고 값을 가져올 경우 e.target.value를 사용하면 됩니다.

[ 참고 ]
참고로 Checkbox와 onChanged에 사용된 함수를 같이 사용하면 아래와 같습니다
<Checkbox onChange={(e = > checked = e.target.checked} />

아래는 Checkbox, Radio에서 사용 가능한 Props와 Methods입니다.


@ Props 정보
defaultChecked // <boolean> 체크박스의 초기값을 설정함
disabled // <boolean> Disabled 상태를 설정
checked // <boolean> 체크 상태를 결정함
indeterminate // <boolean> 전체 선택에서 주로 사용되는 일부 체크됨(모두 체크되지 않음)
autoFocus // <boolean> mounted 상태에 자동으로 포커스 됨
onChange // <function> 값이 변경될 때 콜백 호출


@ Methods 정보
blur() // focus에서 벗어나 blur 상태인 경우
focus() // blur와 반대로 focus될 경우



! Checkbox Group, Radio Group 알아보기
이번에는 Checkbox Group에 대하여 알아봅니다.  Checkbox Group은 여러 개의 값을 각각 설정하지 않고 한 번에 선언하여 사용할 수 있습니다. 아래는 간단한 예제입니다.
<Checkbox.Group
  options={['web', 'is', 'free', 'com']}
/>

options는 string의 값을 가지는 배열을 사용해야 합니다. 위 예제를 실행하면 web, is, free, com의 값을 가지는 네 개의 체크박스가 나타나게 됩니다.

아래는 체크박스 다음으로 Radio Group의 사용 예제입니다. Checkbox Group과 거의 동일합니다.
<Radio.Group
  options={['인기순', '최신순']}
/>

<Radio.Group
  optionType={'button'}
  buttonStyle={'outline'}
  defaultValue={'인기순'}
  options={['인기순', '최신순']}
/>

여기서 아래 예제의 경우 라디오 타입을 버튼처럼 사용한 예제입니다. 이와 같이 Radio를 버튼처럼 사용 가능한 optionType 설정이 가능합니다.

methods의 경우 위와 같이 blur(), focus()가 있습니다. 아래는 사용 가능한 props 정보입니다.

@ Checkbox Group Props
defaultChecked // <array[string]> 초기값을 설정함
disabled // <boolean> Disabled 상태를 설정
options // <array[string]> 사용할 값을 선언
value // <array[string]> 현재 선택된 값을 설정
name // <string> 자식 요소의 사용될 name 속성
onChange // <function> 값이 변경될 때 콜백 호출

아래는 추가로 Radio Group에서 사용할 수 있는 props입니다.

@ Radio Group Props
size // large, middle, small 값으로 버튼 크기를 선택함
optionType // default와 button 중 선택
buttonStyle // Button 타입의 스타일로 outline(default), solid 선택


여기까지 antd 라이브러리의 컴포넌트 Radio, Checkbox 그리고 그룹 사용 방법과 예제를 알아봤습니다.