Recoil을 이용한 Local Storage 연동 및 상태 관리 방법

Recoil

Recoil은 React의 state를 global하게 관리해 줌으로써 컴포넌트 끼리 불필요하게 props를 교환하는 일을 줄여준다.

Recoil에는 state를 전역적으로 관리해 주는 기능 말고도 여러가지 기능들이 있는데 그중 local storage를 이용하여 데이터를 브라우저에 저장하는 기능에 대해 알아보자.

먼저 recoil이 state를 제대로 관리하고 있는지 보기위해 App > Form > Input 의 component 구조를 만들었다.

Form 에서 submit이 일어나면 App에서 Input의 값을 출력 해준다.

function App() {
  const [name, setName] = useRecoilState(nameState);

  return (
    <>
      <h1>My name is {name}</h1>
      <Form></Form>
    </>
  );
}

const Form = () => {
  const [name, setName] = useRecoilState(nameState);
  const [value, setValue] = useRecoilState(valueState);

  return (
    <form
      onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        setName(value);
      }}
    >
      <Input></Input>
    </form>
  );
};

const Input = () => {
  const [value, setValue] = useRecoilState(valueState);

  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setValue(value);
  };
  return <input value={value} type="text" onChange={onChange}></input>;
};

State가 제대로 바뀌는 것을 확인할 수 있다. 이제 nameState를 local storage에 저장해보자.

Recoil effects

Recoil effects를 이용하면 state가 변할 때 마다 자동으로 local storage를 업데이트 시켜줄 수 있다. 또한 자동으로 local storage에서 해당 갑을 받아오는 것이 가능하다.

export const nameState = atom({
  key: "name",
  default: "",
  effects: [
    ({ setSelf, onSet }: any) => {
      const savedValue = localStorage.getItem("name");
      if (savedValue !== null) setSelf(JSON.parse(savedValue));
      onSet((newValue: any, _: any, isReset: boolean) => {
        isReset
          ? localStorage.removeItem("name")
          : localStorage.setItem("name", JSON.stringify(newValue));
      });
    },
  ],
});

Recoil에서 local storage를 사용하기 위해 effects 부분을 추가하였다.

setSelf : local storage에서 state 값을 받아오는 함수이다. 보통 App이 실행되었을 때 state의 초기값을 설정할 때 쓰인다.
onSet : local storage에 새로운 값을 저장하는 함수이다. state가 변화하는 것을 감지하여 자동으로 실행되어 local storage를 업데이트 한다.

마치며

React는 library가 정말 많은것 같다. vanilla js에서는 당연하게 하나하나 해줘야 하는 것들도 react의 library를 이용하면 자동으로 되는 것이 많다. local storage 부분도 그런것이 실제로는 name state가 바뀌는 부분 마다 local storage를 업데이트 시켜줘야 했지만 react를 이용하니 이를 자동으로 해주는 것을 확인할 수 있었다.

wordle 개발을 해보니 막히는 부분이나 이게맛나 싶은 부분이 있었는데 찾아보면 useForm(), useRef() 등 새로운 기능을 이용하여 처리를 해주면 쉽다고 한다.

다음엔 useRef()와 useForm()을 알아보고 wordle을 더 깔끔하게 수정 할 수 있는지 알아보아야겠다.