React에서 체크박스로 작업하는 방법

이용 약관 동의, 기본 설정 목록 선택 등과 같은 확인란을 사용해야 하는 여러 경우를 접했을 수 있습니다. 이 기사에서는 React에서 확인란을 사용하는 다양한 시나리오를 배웁니다.

먼저 아래와 같이 간단한 체크박스 컴포넌트를 생성해 보겠습니다.

export const Checkbox = () => {
  return (
    <div>
      <input type="checkbox" id="checkbox" />
      <label htmlFor="checkbox">I agree to Terms of Service </label>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Checkbox />
    </div>
  )
}

export default App

이제 응용 프로그램을 테스트하면 확인란을 선택하거나 선택 취소할 수 있음을 알 수 있습니다. 그러나 확인란의 현재 상태를 어떻게 알 수 있습니까?

체크박스 상태 저장 및 읽기

useState 후크를 사용하여 확인란의 상태를 저장할 수 있습니다.

import { useState } from "react"

export const Checkbox = () => {
  const [isChecked, setIsChecked] = useState(false)
  return (
    <div>
      <input type="checkbox" id="checkbox" checked={isChecked} />
      <label htmlFor="checkbox">I agree to Terms of Service </label>
      <p>The checkbox is {isChecked ? "checked" : "unchecked"}</p>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Checkbox />
    </div>
  )
}

export default App

이제 확인란을 선택하려고 하면 아무 일도 일어나지 않으며 콘솔에 다음과 같은 경고가 표시됩니다.
You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.
왜 이런 일이 발생합니까? 경고에서 알 수 있듯이 상태 값을 확인란으로 설정하고 확인란 상태가 변경되는 동안 아무 작업도 수행하지 않습니다. 따라서 on change 핸들러를 바인드해 보겠습니다.

import { useState } from "react"

export const Checkbox = () => {
  const [isChecked, setIsChecked] = useState(false)

  const checkHandler = () => {
    setIsChecked(!isChecked)
  }

  return (
    <div>
      <input
        type="checkbox"
        id="checkbox"
        checked={isChecked}
        onChange={checkHandler}
      />
      <label htmlFor="checkbox">I agree to Terms of Service </label>
      <p>The checkbox is {isChecked ? "checked" : "unchecked"}</p>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Checkbox />
    </div>
  )
}

export default App

확인란을 처음에 선택하려면 초기화하는 동안 useState 후크에 전달true할 수 있습니다.

제어되지 않는 입력을 사용하는 체크박스

우리가 본 위의 예는 제어 입력을 사용하는 것입니다. 다음으로 제어되지 않은 입력을 사용하여 동일한 것을 구현하는 방법을 살펴보겠습니다.
내previous article에서 제어된 입력과 제어되지 않은 입력의 차이점을 설명했습니다.

import { useRef } from "react"

function App() {
  const checkboxRef = useRef(null)

  const formSubmitHandler = e => {
    e.preventDefault()
    alert(
      `The checkbox is ${checkboxRef.current.checked ? "checked" : "unchecked"}`
    )
  }
  return (
    <div className="App">
      <form onSubmit={formSubmitHandler}>
        <input
          type="checkbox"
          id="checkbox"
          defaultChecked={true}
          ref={checkboxRef}
        />
        <label htmlFor="checkbox">I agree to Terms of Service </label>
        <p>
          <button type="submit">Submit</button>
        </p>
      </form>
    </div>
  )
}

export default App

여기서는 defaultChecked prop을 사용하여 초기 값을 제공합니다. 양식 제출 핸들러 내에서 체크박스 값에 액세스할 수 있도록 체크박스에 대한 참조를 만들었습니다.
여기서 우리는 체크박스의 현재 상태를 저장하기 위해 어떤 상태도 사용하지 않습니다. DOM 자체에 저장됩니다.

이름에서 알 수 있듯이 입력을 더 많이 제어할 수 있으므로 제어되지 않는 구성 요소보다 제어되는 구성 요소를 사용하는 것이 항상 권장됩니다.

여러 확인란을 표시하기 위해 확인란 구성 요소 재사용

먼저 재사용 가능한 구성 요소로 이전에 만든 확인란 구성 요소를 만들어 보겠습니다.

```jsx 앱.js
"반응"에서 { useState } 가져오기

내보내기 const 체크박스 = ({ isChecked, label, checkHandler }) => {
반품 (



유형="체크박스"
아이디="체크박스"
확인됨={확인됨}
onChange={체크핸들러}
/>
{상표}

)
}

함수 앱() {
const [isChecked, setIsChecked] = useState(거짓)

const checkHandler = () => {
setIsChecked(!isChecked)
}

반품 (



isChecked={isChecked}
체크핸들러={체크핸들러}
label="서비스 약관에 동의합니다"
/>
확인란은 {isChecked ? "선택됨": "선택되지 않음"}


)
}

기본 앱 내보내기

Now let's say you have a use case where you want to display a list of pizza toppings, from which you want the users to choose. We can achieve that by the following code:



```jsx
import { useState } from "react"

const allToppings = [
  { name: "Golden Corn", checked: false },
  { name: "Paneer", checked: false },
  { name: "Tomato", checked: false },
  { name: "Mushroom", checked: false },
  { name: "Onion", checked: false },
  { name: "Black Olives", checked: false },
]

export const Checkbox = ({ isChecked, label, checkHandler, index }) => {
  return (
    <div>
      <input
        type="checkbox"
        id={`checkbox-${index}`}
        checked={isChecked}
        onChange={checkHandler}
      />
      <label htmlFor={`checkbox-${index}`}>{label}</label>
    </div>
  )
}

function App() {
  const [toppings, setToppings] = useState(allToppings)

  const updateCheckStatus = index => {
    setToppings(
      toppings.map((topping, currentIndex) =>
        currentIndex === index
          ? { ...topping, checked: !topping.checked }
          : topping
      )
    )

    // or
    // setToppings([
    //   ...toppings.slice(0, index),
    //   { ...toppings[index], checked: !toppings[index].checked },
    //   ...toppings.slice(index + 1),
    // ]);
  }

  return (
    <div className="App">
      {toppings.map((topping, index) => (
        <Checkbox
          key={topping.name}
          isChecked={topping.checked}
          checkHandler={() => updateCheckStatus(index)}
          label={topping.name}
          index={index}
        />
      ))}
      <p>
        <pre>{JSON.stringify(toppings, null, 2)}</pre>
      </p>
    </div>
  )
}

export default App

여기에서 체크박스의 체크 상태를 로컬 상태로 저장합니다toppings. 변경된 확인란의 인덱스로 호출되고 로컬 상태를 업데이트하는 메서드updateCheckStatus를 작성했습니다. 또한 모든 것이 예상대로 작동하는지 확인할 수 있도록 현재 상태를 JSON 형식으로 표시하고 있습니다.

모두 선택 및 모두 선택 취소

모든 확인된 상태를 각각 true 및 false로 업데이트하여 모두 선택 및 모두 선택 취소를 구현할 수 있습니다.

import { useState } from "react"

const allToppings = [
  { name: "Golden Corn", checked: false },
  { name: "Paneer", checked: false },
  { name: "Tomato", checked: false },
  { name: "Mushroom", checked: false },
  { name: "Onion", checked: false },
  { name: "Black Olives", checked: false },
]

export const Checkbox = ({ isChecked, label, checkHandler, index }) => {
  console.log({ isChecked })
  return (
    <div>
      <input
        type="checkbox"
        id={`checkbox-${index}`}
        checked={isChecked}
        onChange={checkHandler}
      />
      <label htmlFor={`checkbox-${index}`}>{label}</label>
    </div>
  )
}

function App() {
  const [toppings, setToppings] = useState(allToppings)

  const updateCheckStatus = index => {
    setToppings(
      toppings.map((topping, currentIndex) =>
        currentIndex === index
          ? { ...topping, checked: !topping.checked }
          : topping
      )
    )

    // or
    // setToppings([
    //   ...toppings.slice(0, index),
    //   { ...toppings[index], checked: !toppings[index].checked },
    //   ...toppings.slice(index + 1),
    // ]);
  }

  const selectAll = () => {
    setToppings(toppings.map(topping => ({ ...topping, checked: true })))
  }
  const unSelectAll = () => {
    setToppings(toppings.map(topping => ({ ...topping, checked: false })))
  }

  return (
    <div className="App">
      <p>
        <button onClick={selectAll}>Select All</button>
        <button onClick={unSelectAll}>Unselect All</button>
      </p>

      {toppings.map((topping, index) => (
        <Checkbox
          key={topping.name}
          isChecked={topping.checked}
          checkHandler={() => updateCheckStatus(index)}
          label={topping.name}
          index={index}
        />
      ))}
      <p>
        <pre>{JSON.stringify(toppings, null, 2)}</pre>
      </p>
    </div>
  )
}

export default App