react-hook-form 과 meterial-UI 함께 쓰기 (2) - ToggleButton

이전 게시물(1) - TextField 에 이어서

https://tacit.tistory.com/41

react-hook-form 과 meterial-UI 함께 쓰기 (1) - TextField

 

이번엔 ToggleButton 과 함께 사용하는 방법에 대해 정리해보려한다.

 

CheckBox로 예시들이 몇개 구글에 나와있다.

 

ToggleButton도 비슷한 맥락이다.

 

import ToggleButton from '@mui/material/ToggleButton';
import { BiLock } from "react-icons/bi";
import { useForm, Controller } from 'react-hook-form';

export default function App() {
  const { handleSubmit, control, formState: {errors} } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="shareState"
        control={control}
        defaultValue={false}
        render={({ field }) => (
          <>
            <div className="modal-title">{field.value? "비공개":"공개"}</div>
            <ToggleButton
              color="primary"
              value="check"
              selected={field.value}
              onChange={() => field.onChange(!field.value)}
            >
              <BiLock className="lock-icon"/>
            </ToggleButton>
          </>
        )}/>
      <button type="submit">전송</button>
    </form>
  );
}

 

일단 포멧은 1편의 TextField와 동일하다.

 

controller를 import 한 뒤 , 원하는 UI 컴포넌트를 <Controller> 컴포넌트로 감싸주면 된다.

 

여기서 핵심적으로 다른 부분은 바로 onChange 속성을 사용하는 것이다.

 

우선 1편과 동일하게 전달해주는 속성들에 대해서 간략하게 정리해보자

 

• name : 역시 form 제출시 key 값으로 사용될 값이다. 이 경우 게시글을 공개할껀지, 비공개로 할 것인지를 정하는 shareStatus라는 키값으로 표현했다.
  서버로 제출시 "shareStatus" : false 이런식으로 제출될 예정!
• control : react-hook-form과 material-UI를 연결해주는 용도라고 생각하고 넘어가자
• defaultValue : 역시 1편에서 설명했듯이, 지정하지 않으면 쓸 데없는 warning이 발생한다.

index.js:1 Warning: A component is changing an uncontrolled input to be controlled.
This is likely caused by the value changing from undefined to a defined value, which should not happen.
Decide between using a controlled or uncontrolled input element for the lifetime of the component.
More info: https://reactjs.org/link/controlled-components

 

• render : 내가 쓰고 싶은 UI의 컴포넌트를 적어주면 되는 부분이다.
  • field : form에 제출하는 value와 관련된 내용을 이어준다? 라고 생각해보자
  • 일단, 나의 경우 shareStatus 값에 따라서 위의 타이틀이 공개 <-> 비공개 토클이 되어야 해서 위와 같이 삼항연산자로 표현해 주었다
    

    

    상단의 타이틀 토글

  • ToggleButton 컴포넌트를 랜더링해준다. ToggleButton 컴포넌트의 경우 mui에서 제공하는 도큐먼트에 따르면,
    • value = 'check' 라는 props를 통해서 checkbox 처럼 true/false 값으로 사용할 수 있다.
    • selected 속성은 field.value를 통해서 react-hook-form이 읽어갈 value 값과 연결을 해준다.
    • onChange 속성은 mui에서 제공하는 props인데, 이제 이를 react-hook-form 의 onChange와 연결을 해주어야 한다. 그 방법은 위에 code와 같다.
      field 객체 안의 onChange 함수를 실행시키면서, field.value의 값을 ! 로 토글 시키는 것이다 (true<->false)
      
      

 

 

다음 게시글에서는 <TextField> , <ToggleButton> 처럼 단일 컴포넌트를 받아서 쓰는 것이 아닌, 여러가지 컴포넌트들을 조합하여 커스텀한 컴포넌트 그룹을 react-hook-form 과 연결하는 방법에 대해 정리해 보려 한다.

 

https://tacit.tistory.com/43

react-hook-form 과 meterial-UI 함께 쓰기 (3) - DateRangePicker