React의 라디오 버튼

Irakli Tchigladze 2023년1월30일

React React Button

React의 라디오 버튼
사용자 정의 라디오 구성 요소

JavaScript 프레임워크에서 간단한 양식을 만든 적이 있는 개발자는 라디오 버튼에 익숙해야 합니다. 사용자가 여러 옵션 중에서 선택하도록 할 때 사용할 기본 <input/> 유형입니다. React에서 라디오 버튼을 구현하는 두 가지 접근 방식을 살펴보겠습니다.

React의 라디오 버튼

JSX에서 라디오 버튼의 기본 구현은 HTML과 매우 유사합니다. 예를 살펴보겠습니다.

<div>
     <input type="radio" name="theme" value="DARK"/>Dark
     <input type="radio" name="theme" value="LIGHT"/>Light
</div>

이 JSX 코드는 일반 HTML로 쉽게 오인될 수 있습니다. onChange 이벤트 후 상태 업데이트와 같은 더 복잡한 기능을 도입함에 따라 HTML과 JSX의 차이점이 더욱 두드러집니다. 이 예를 살펴보겠습니다.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      theme: "light"
    }
  }
  render() {
    return <div onChange={(e) => this.setState({theme: e.target.value})}>
              <input type="radio" name="theme" value="DARK"/>Dark
              <input type="radio" name="theme" value="LIGHT"/>Light
           </div>;
  }
}

이 코드에서 사용자는 Dark와 Light의 두 가지 옵션이 있습니다. 그들이 그들 중 하나를 선택할 때마다 우리는 입력 요소의 value 속성에서 값을 캡처하고 상태의 theme 속성을 그것과 동일하게 설정합니다. 더 나은 데모를 위해 샘플 playcode 앱을 살펴보세요.

이벤트 핸들러는 한 쌍의 중괄호 사이에 위치합니다. 중괄호 사이의 표현은 자바스크립트 코드로 실행해야 함을 전달해야 합니다.

개발자는 이벤트 핸들러 선택에 제한을 받지 않습니다. 선택사항을 제출하기 위해 버튼을 사용하는 경우 라디오 버튼이 onClick 양식 내에 배치된 경우 onChange, onSubmit을 사용할 수 있습니다.

`.map()`

옵션 배열이 있는 경우 .map() 메서드를 사용하여 옵션을 모두 렌더링할 수 있습니다. 예를 들어 사용자가 선택할 수 있도록 허용하려는 색상 목록이 있는 경우 다음을 수행할 수 있습니다.

const arr = ["white", "black", "blue", "green"]
return (
        <div>
        {
            arr.map(color => 
                <input type="radio" name="colors" value={color} />
                   )  
                 }
        </div>
)

<div> 요소 내의 중괄호는 React에 내부 표현식이 JavaScript 코드로 실행되어야 함을 알려줍니다.

코드가 실행되면 각각 어레이의 value 속성을 갖는 4개의 <input> 요소로 끝납니다.

`defaultChecked`

기본적으로 라디오 버튼을 확인하려면 defaultChecked 속성을 사용할 수 있습니다. 위의 예에서 기본 어두운 테마를 설정하려는 경우 요소는 다음과 같이 표시됩니다.

<input type="radio" name="theme" defaultChecked value="DARK"/>Dark

사용자 정의 라디오 구성 요소

React 애플리케이션을 개발할 때 항상 단순하게 유지해야 합니다. 또한 라디오 버튼 기능을 많이 사용하려는 경우 사용자 지정 라디오 구성 요소를 만들어 코드 반복을 방지할 수 있습니다.

const Radio = ({handler, theme}) => {
  return <div style={{height: "500px", width: "500px", backgroundColor:                                 theme.toLowerCase() === "light" ? "white" : "black"}} 
                onChange={handler}>
              <input type="radio" name="theme" value="DARK"/>Dark
              <input type="radio" name="theme" value="LIGHT"/>Light
           </div>;
}

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      theme: "light"
    }
  }
  render() {
    const handleChange = (e) => this.setState({theme: e.target.value})
    return <div><Radio handler={handleChange} theme={this.state.theme}></Radio></div>
  }
}

맨 위에 Radio라는 상태 비저장 기능 구성 요소를 만들었습니다. 이벤트 핸들러를 소품으로 전달할 수 있으므로 이 하위 구성 요소가 상태를 시작해야 할 실제 이유가 없습니다. 상태가 없는 구성 요소도 테스트 및 유지 관리가 더 쉽습니다.

작가: Irakli Tchigladze

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

React의 라디오 버튼

.map()

defaultChecked

사용자 정의 라디오 구성 요소

관련 문장 - React Button

`.map()`

`defaultChecked`