#6 STATE MANAGEMENT

본 포스팅은 노마드코더의 React JS 마스터클래스를 수강한 뒤, 작성되었습니다.

이번 강의에서는 Recoil를 사용해서 state management를 진행

📌 Recoil

npm install recoil

Recoil 사용하기

import { RecoilRoot } from 'recoil';

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
);

atom이란

• 데이터 상태의 단위 (업데이트/구독 가능)
• atom의 값이 변화하면, 해당 값을 구독하고 있는 장소들은 모두 새로운 변화된 값으로 변화

아래는 atom.ts vkdlf

import { atom } from "recoil";

export const isDarkAtom = atom({
  key: "isDark",
  default: true,
});

해당 파일에서 recoil의 atom function 사용
key : 유일한 이름 & 기본값이 필요

const isDark = useRecoilVaue(isDarkAtom);

이런식으로 useRecoilValue() hook에 isDarkAtom을 넣으면 isDark의 값을 추후 코드에서 사용할 수 有

useSetRecoilState

: atom의 value를 수정하기 위해서 사용하는 hook

• function을 가져와서 특정 value의 값을 수정

const setDarkAtom = useSetRecoilState(isDarkAtom);

<button onClick=(() => setDarkAtom((prev) => (!prev))>

Forms

npm install react-hook-form

function ToDoList() {
  const { register, watch } = useForm();

  return (
    <div>
      <form>
        <input {...register("todo")} placeholder="Write a to do" />
        <button>Add</button>
      </form>
    </div>
  );
}

export default ToDoList;

• spread 문법으로 input props에 넣어준 것
• useForm을 사용해서 한줄로 작성한 코드가 Onchange 이벤트, value, useState를 모두 대체!!

useForm 함수의 watch를 사용해서 form의 입력값들의 변화를 추적할 수 有

const { register, watch } = useForm();

결론적으로, 위의 한 줄로 다 대체가 가능한 것!!!

Form Validation

function ToDoList() {
  const { register, handleSubmit } = useForm();
  const onValid = (data: any) => {
    console.log(data);
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onValid)}>
        <input
          {...register("email", { required: true, minLength: 10 })}
          placeholder="email"
        />
        <input
          {...register("firstName", { required: true })}
          placeholder="firstName"
        />
        <input
          {...register("lastName", { required: true })}
          placeholder="lastName"
        />
        <input
          {...register("userName", { required: true, minLength: 10 })}
          placeholder="username"
        />
        <input
          {...register("password", { required: true, minLength: 5 })}
          placeholder="password"
        />
        <input
          {...register("password1", { required: true, minLength: 5 })}
          placeholder="password1"
        />
        <button>Add</button>
      </form>
    </div>
  );
}

• 다른 모든 일들이 모두 종료된 후, 데이터가 유효할때 onValid 함수가 호출

Form Errors

아래 코드를 통해서 에러가 발생했을 시, 유저들이 볼 수 있게 할 수 有

function ToDoList() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();