[노마드 코더] Chapter.5 STATE MANAGEMENT

*다크모드 설정

 

App.tsx

function App() {
  const [isDark, setIsDark] = useState(false);
  const toggleDark = () => setIsDark((current) => !current);
  return (
    <>
      <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
        <button onClick={toggleDark}>Toggle Mode</button>
        <GlobalStyle />
        <Router />
        <ReactQueryDevtools initialIsOpen={true} />
      </ThemeProvider>
    </>
  );
}

 

* react-hook-form

 

import

import {useForm} from "react-hook-form"

 

register = onChange 이벤트와, value, useState를 모두 대체해준다.

watch = form의 입력값들의 변화를 관찰 할 수 있게 해주는 함수

const {register, watch} = useForm();

...

	<form>
            <input {...register("toDo")} placeholder="입력하시오" />
        </form>

 

register 만적으면 input에 정보들이 들어온다 이제 이 정보들을 줘야 한다 어떻게 하냐면 ?

function ToDoList(){
    const {register, handleSubmit} = useForm();
    const onValid = (data : any) =>{
        console.log(data);
    }
    console.log()
    return <div>
        <form onSubmit={handleSubmit(onValid)}>
            <input {...register("toDo")} placeholder="입력하시오" />

        </form>
    </div>
}

Form에 handleSubmit만 넣고, onSubmit = {handleSubmit(onValid)}만 해주면 데이터가 전달된다.

너무나 편리하다.

 

유효성 검사도 편하다

다음은 회원가입 중 닉네임의 유효성 검사를 하는것이다.

<InputStyleSingup
            type="nickname"
            {...register("nickname", {
              required: true,
              maxLength: 7,
              pattern: /^[A-za-z]/g,
            })}
          />
          {errors.nickname && errors.nickname.type === "required" && (
            <P>nickname을 입력해주세요!</P>
          )}
          {errors.nickname && errors.nickname.type === "maxLength" && (
            <P>7글자 넘지 않도록 해주세요!</P>
          )}
          {errors.nickname && errors.nickname.type === "pattern" && (
            <P>nickname은 영어로 써주세요!</P>
          )}

간편하게 error 처리도 가능.. 너무 편하다..

Input 태그가 많을 경우 react-hook-form 이 짱인듯 ( 로그인, 회원가입, 등등)

 

직접 유효성 검사도 할수있다, 비속어나 적절하지 않은 단어를 닉네임에 넣는다면 

validate를 써서 유효성 검사 가능!

 type="nickname"
            {...register("nickname", {
              required: true,
              maxLength: 7,
              pattern: /^[A-za-z]/g,
              validate: (value) => !value.includes("안녕"),
            })}
            
            ...
            
 {errors.nickname && errors.nickname.type === "validate" && (
            <p>적절하지 않은 단어를 포함하였습니다.</p>
          )}

"안녕"이라는 단어를 쓰면 저절로 유효성 검사!

 

*recoil

전역 클라이언트 상태 관리

atom에 있는걸 가져다 쓰면 된다!

 

atoms.ts

import { atom } from "recoil";

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

key값이랑 처음에 default 값을  써주고,

그냥 value를 가지고 오고싶으면 다음과 같이 useRecoil을 쓰면된다.

const isDark = useRecoilValue(isDarkAtom);
  return (
    <>
      <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <GlobalStyle />
        <Router />
        <ReactQueryDevtools initialIsOpen={true} />
      </ThemeProvider>
    </>

state값을 변경하고 싶을때는 이렇게 쓰면 된다.

const setDarkAtom = useSetRecoilState(isDarkAtom);
  const toggleDarkAtom = () => setDarkAtom(prev => !prev);
  
  ...
  
  <button onClick={toggleDarkAtom}>Toggle Mode</button>

 

 

* useRecoilState

  const value = useRecoilValue(toDoState);
  const modFn = useSetRecoilState(toDoState);

이 코드는 이 useRecoilState랑 같다.

const [value, modFn] = useRecoilState(toDoState)

 

 

usestate랑 비슷하니 코드를  또 이렇게 바꾸자

const [toDos, setToDos] = useRecoilState(toDoState);

쓰는법은 

interface IToDo {
  text: string;
  id: number;
  category: "TO_DO" | "DOING" | "DONE";
}

const handleValid = ({ toDo }: IForm) => {
    setToDos((oldToDos) => [
      { text: toDo, id: Date.now(), category: "TO_DO" },
      ...oldToDos,
    ]);

이전의 state을 oldToDos를 받아서 [...oldToDos]로 oldToDo의 요소들이 들어있는 배열을 반환해준다.

{text: toDo, id: Date.now(), category: "TO_DO"} 는 새로운 요소들을 추가 해주는 것이다. 

 

그리고 화면에 나타낼땐 todos를 사용해 나타내면 simple!

<ul>
        {toDos.map((toDo) => (
          <li key={toDo.id}>{toDo.text}</li>
        ))}
      </ul>

실행화면

* recoil Selector

atom을 가져다가 output을 변형할 수 있다.

다음 코드는 기존에있던 toDoState를 selector를 하여 변형한 것이다.

export const toDoState = atom<IToDo[]>({
  key: "toDo",
  default: [],
});

export const toDoSelector = selector({
  key: "toDoSelector",
  get: ({ get }) => {
    const toDos = get(toDoState);
    return [
      toDos.filter((toDo) => toDo.category === "TO_DO"),
      toDos.filter((toDo) => toDo.category === "DOING"),
      toDos.filter((toDo) => toDo.category === "DONE"),
    ];
  },
});

변형한 것을 사용할 때에는

 const [toDo, doing, done] = useRecoilValue(toDoSelector);

useRecoilValue로 사용하면됨 !