State Management

📚 Recoil

Recoil은 React를 위한 전역 상태 관리 라이브러리이다.

리액트에서 Props는 하강적인 흐름의 형태를 갖기 때문에, chart 컴포넌트에서 App 컴포넌트의 isDark 변수를 접근하려면 isDark 변수를 사용하지 않는 컴포넌트들을 통해 Props로 전달받아야 했다. 때문에 해당 변수를 사용하지 않는 컴포넌트에서도 불필요한 코드를 작성해야 하는 불편함이 발생함! 🥲

Recoil을 통해서 우리는 그러한 변수들을 그 변수를 필요로 하는 컴포넌트가 어디에 위치해 있든 전역적으로 접근 가능하도록 만들 수 있다.

npm install recoil

index.tsx

import { RecoilRoot } from "recoil";

ReactDOM.render(
  <RecoilRoot>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </RecoilRoot>,
  document.getElementById("root")
);

👉🏻 라이브러리 설치 후, RecoilRoot로 감싸주어야 한다.

atoms.ts

import { atom } from "recoil";

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

👉🏻 Recoil 라이브러리를 통해 전역적으로 관리하고자 하는 변수들을 atom이라고 한다. 이 atom마다 고유한 key값을 적어주고, default 값을 지정해 준다.

🐳 해당 atom 값을 원하는 컴포넌트에서 접근하려면?

✅ useRecoilValue를 import 한 후 다음과 같이 선언하면 바로 접근이 가능함! 😌

const isDark = useRecoilValue(isDarkAtom);

이 코드는 해당 변수값을 읽기만 가능하다.

🕊️ 해당 Atom 값을 컴포넌트 내에서 변경하고 싶다!

 import { useSetRecoilState } from "recoil";

 const setDarkAtom = useSetRecoilState(isDarkAtom);
 const toggleDarkAtom = () => setDarkAtom((prev) => !prev);

✅ useSetRecoilState를 import한 후 변경하고자 하는 atom을 인자로 넘겨주고, useState의 set 함수와 비슷하게 사용하면 전역적으로 atom의 값이 변경된다.

🌱 React-hook-form

react-hook-form 이란 React 기반의 form 관리 라이브러리로, 간단하고 효율적인 방식으로 form 유효성 검사와 상태 관리를 처리할 수 있게 도와준다.

기존의 방식으로는 회원가입용 form 컴포넌트를 만들 때, 입력받을 이름, 아이디, 별명, 비밀번호 등 모든 변수들의 state를 만들어 관리해야 했고 validation 또한 각각 처리하여 에러 메시지를 띄워주어야 했음! react-hook-form을 이용하면 훨씬 간단하게 코드 작성이 가능하다. 😊

npm install react-hook-form

ToDoList.tsx

const {
    register,
    handleSubmit,
    formState,
    formState: { errors },
    setError,
  } = useForm<IForm>({
    defaultValues: {
      email: "@naver.com",
    },
  });

👉🏻 register, handleSubmit, formState, setError 등 form과 input 태그에 인자로 넘길 함수들을 선언해 준다.

 <form
        style={{ display: "flex", flexDirection: "column" }}
        onSubmit={handleSubmit(onValid)}
      >

👉🏻 form 태그에 handleSubmit 함수 onSubmit에 걸어주기. onValid 함수는 input 태그에서 걸어준 제약 조건을 통과 후 다른 검사를 진행하는 유효성 검사용 함수이다.

const onValid = (data: IForm) => {
    if (data.password !== data.password1) {
      setError(
        "password1",
        { message: "Password are not the same." },
        { shouldFocus: true }
      );
    }
    setError("extraError", { message: "Server Offline." });
  };

👉🏻 입력받은 비밀번호와 비밀번호 확인용 데이터가 같지 않을 경우 "password1"의 키를 가진 곳에 에러를 발생시킨다. shouldFocus를 설정하면 커서가 에러가 발생한 곳으로 이동함!

<input
          {...register("email", {
            required: "Write here.",
            validate: {
              noNico: (value) =>
                value.includes("nico") ? "No nicos allowed" : true,
              noNick: (value) =>
                value.includes("nicks") ? "No nick allowed" : true,
            },
            pattern: {
              value: /^[A-Za-z0-9._%+-]+@naver.com$/,
              message: "Only naver Email is allowed. ",
            },
          })}
          placeholder="Email"
        />

👉🏻 각 input 태그마다 고유한 key 값과, 다양한 조건을 걸어줄 수 있다. required: true 의 경우 별다른 메시지 없이 입력이 필수라는 것을 알려주고, required: "Write here." 의 경우 해당 메시지를 띄워 사용자에게 입력을 요구할 수 있다.

👉🏻 validate를 통해 입력된 값에 제한을 줄 수도 있고, pattern을 통해 특정 형식을 요구할 수도 있다.

<span>{errors?.email?.message as string}</span>

✅ errors 객체를 통해 어떤 validation이 실패했는지 띄워 줄 수 있다!

Nomad Coders React JS 마스터 클래스 #6