WIL | react-hook-form과 프로젝트 관리하기

이번주 한 일

react-hook-form 사용(회사 프로젝트)
custom-hook 공부
객체합치기

이번주의 정리

1. react-hook-form

설치

npm i react-hook-form
yarn add react-hook-form

사용법(대표적인 몇가지!)
- register : input에서 값을 불러오기 위한 함수로 다른 옵션을 이횽하면 input의 유효성 검사도 쉽게 할 수 있음
- watch : input의 입력값을 실시간으로 알 수 있게 해줌
- handleSubmit : form을 서버로 제출할 때 사용
- onError : form에서 에러났을 때 실행되는 함수
- setError : error를 수동으로 설정할 수 있음
- clearErrors : error를 수동으로 지울 수 있음
예시

예시!!!

export default function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  const onError = (error) => {
    console.log(error);
  };
 
  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit, onError)}>
        <label htmlFor="password">비밀번호</label>
        <input
          id="password"
          type="password"
          placeholder="password"
          {...register("password", {
            pattern: {
              value:
                /^[A-Za-z0-9`\-=\\\[\];',\./~!@#\$%\^&\*\(\)_\+|\{\}:"<>\?]{8,16}$/,
              message: "비밀번호 형식을 확인해주세요.",
            },
          })}
        />
        <button>테스트</button>
      </form>
      {errors && <h1>{errors?.passowrd?.message}</h1>}
    </div>
  );
}

2. custom-hook

특징
- Hook 규칙의 위반 여부를 체크하기 위해 custom hook은 "use"로 시작되어야 함
- 각각의 hook에 대한 호출은 서로 독립된 state를 받음
- 로직 공유의 유연성을 제공
예시
- 공식문서 custom hook을 보고 테스트를 해보려고 했는데, ChatAPI 문제로 일단 다른 간단한 예시로 변경했다.
- 공식문서 해석은 여기가 잘해두셨다.

간단한 예시

 
//Inputs.jsx
 
export default function inputs(){
  const userName = useInputs();
  const userEmail = useInputs();
 
return (
  <>
  <input type="text" id="userName" {...userName}/>
  {userName.value}
  <input type="email" id="userEmail" {...userEmail}/>
  {userEmail.value}
  </>
)
}
 
//useInputs.js
import { useState } from "react";
 
export default function useInputs() {
  const [value, setValue] = useState("");
  const onChange = (e) => setValue(e.target.value);
 
  return { value, onChange };
}

3. 객체합치기

객체 속성에 접근하는 방법
- 점 표기법 : key값을 그대로 적어주는 형식
- 대괄호 표기법 : key값을 문자열로 적어주는 형식
```
object.person;
object["person"];
```
두개의 객체를 합칠 때(같은 키를 가지고 있는 두개의 객체)
각각의 객체 형태로 하여, 공통되는 key의 value를 객체로 설정해준다.(예시 참고)

객체 합치기 예시

// Fruits component
const Fruits = () => {
  //합치기 전
  const FRUIT_COLOR = {
    banana: "yellow",
    orange: "orange",
    apple: "red",
  } as const;
 
  const FRUIT_COUNT = {
    banana: 5,
    orange: 2,
    apple: 1,
  } as const;
 
  return <Fruit fruitColor={FRUIT_COLOR} fruitCount={FRUIT_COUNT} />;
 
  //합친 후
  const FRUIT_LIST = {
    //공통되는 key인 banana, orange, apple -> 각 value들을 key:value 형태로 공통 key의 value로 넣어준다.
    banana: { color: "yellow", count: 5 },
    orange: {
      color: "orange",
      count: 2,
    },
    apple: { color: "red", count: 1 },
  } as const;
 
  return <Fruit fruitList={FRUIT_LIST} />;
};
 
//Fruit component
 
interface FruitProps {
  fruitList: { [key: string]: { color: string; count: number } };
}
 
const Fruit = ({ fruitList }: FruitProps) => {
  return (
    <>
      <div role="fruitlist">
        {Object.entries(fruitList).map(([key, { color }], i) => (
          <li key={i} role="none">
            <button role="fruit" type="button">
              {color}
            </button>
            {fruitList[key].count}
          </li>
        ))}
      </div>
    </>
  );
};
 
export default Fruit;

react-hook-form
react-hook-form 사용하기
[React] React Hook Form (v7)알아보기
JavaScript | 객체 속성에 접근하는 방법 (점 표기법 / 대괄호 표기법)
객체