[react-hook-form] 여러개 radio check input 에서 같은 name 으로 사용시 반영 안되는 케이스

react-hook-form : https://react-hook-form.com/docs/usecontroller/controller

Controller

리액트 부트스트랩과 함께 사용 : https://react-bootstrap.netlify.app/docs/forms/checks-radios

Checks and radios | React Bootstrap

 

1. With Form.Check type radio

• 리액트 부트스트랩 <Form.Check type=”radio”> 와 함께 사용시

Bad Case

• 코드

<Flex className="gap-8">
  <Form.Check
    {...register("king")}
    type="radio"
    id="king"
    label="Tiger"
    checked={watch("king") == "1"}
    value="1"
    disabled={pageInfo === "detail" && isEditableByField(watch("status"), "", editFlag)}
  />
  <Form.Check
    {...register("king")}
    type="radio"
    id="king"
    label="Lion"
    checked={watch("king") == "2"}
    value="2"
    disabled={pageInfo === "detail" && isEditableByField(watch("status"), "", editFlag)}
  />
</Flex>

 

 

화면

• 기본값으로 원래 detail 값이 radio 에 checked 로 반영 되지 않음
• API 응답으로 “king” 값이 1일 때, → 첫번째 라디오 버튼 Tiger 에 checked 되지 않음

• API 응답으로 “king” 값이 2일 때, → 두번째 라디오 버튼 Lion 에 checked 됨

• 뒤의 Check 만 값을 반영함

---

 

추정 원인

• 같은 name (”king”) 으로 여러개의 Check 라디오가 들어갔을 때, 가장 마지막 거에만 반영이 되는 듯함

• 해결 방안
  • react-hook-form 에서 제공하는 <Controller> 컴포넌트로 두가지 Radio 를 묶어서, name(”king”) 을 인식시킨다

---

 

Good Case

• 코드

<Controller
  name="king"
  control={control}
  render={({ field }) => {
    return (
      <Flex className="gap-8">
        <Form.Check
          type="radio"
          label="Tiger"
          checked={field.value == "1"}
          value="1"
          disabled={pageInfo === "detail" && isEditableByField(watch("status"), "", editFlag)}
          onChange={field.onChange}
        />
        <Form.Check
          type="radio"
          label="Lion"
          checked={field.value == "2"}
          value="2"
          disabled={pageInfo === "detail" && isEditableByField(watch("status"), "", editFlag)}
          onChange={field.onChange}
        />
      </Flex>
    );
  }}
/>