[Recoil] 예습

Next.js도 React 기반이니까 기존에 쓰던 Redux 구조 복붙하면 되겠다!라는 안일한 생각으로 머리가 아팠다.

 

1. Redux가 아닌 Recoil을 선택한 이유

- 1시간 동안 블로그 참고하면서 이것저것 시도 해봤는 데 오류만 발생함.

- 참고한 블로그에서 React와 찰떡인 상태 관리 라이브러리는 Redux가 아니라는 충격적인 사실을 알아 버려서

 

결론은 Next.js에서는 React처럼 Redux를 사용 할 수 없고, React도 Redux가 최고의 상태 관리 라이브러리는 아니다.

(이건 배신이야)

 

방법이 아예 없는 건 아니다. 바로 next-redux-wrapper를 사용하면 된다고 한다.

React에서는 단 하나의 리덕스 스토어만 존재한다.

하지만 Next를 사용하는 순간 리덕스 스토어가 여러 개가 될 수 있다.

Next.js는 유저가 요청 할 때마다 리덕스 스토어를 새로 생성한다.

그럼 어떻게 되겠는가 > 전역 상태 관리가 아니라 컴포넌트별 state가 되는 것이다.

 

Next.js가 제공하는 getInitialProps, getServerSideProps 등에서도 리덕스 스토어에 접근 할 수 있어야 하는 데

next-redux-wrapper가 없으면 이것을 불가능 하다고 한다.

 

과정은 내가 실패 했기 때문에 아래 블로그 참고

# [Next.js] redux ,redux-saga 적용

---

2. Next.js에서 Recoil 사용하기

이걸 공부 하면서 뼈저리게 알게 된 사실 Next.js는 많은 정보가 없다는 점....

공식 문서도 다른 프레임워크에 비해서 양이 적고,,, 참고 블로그도 별로 없어서 공식문서 뜯어 보면서 이해했다..

간신히 책도 찾아서 구매함...

 

시작하기 전에 참고할 점은 Next.js는 SSR(Server Side Rendering)을 지원하기 때문에

각각의 페이지 별로 정적 파일이 생성되어 CSR(Client Side Rendering)과 헷갈릴 수 있다.

 

과정
1) Recoil 라이브러리 설치

yarn add recoil

 

2) _app.js > RecoilRoot 적용

(Next.js에서 _app.js는 React의 index.js와 비슷하다고 보면 된다.)

 

3) /recoil/states.js 파일 생성

const { atom, selector } = require("recoil");

const pageNameState = atom({
  key: "pageNameState",
  default: "",
});

const charState = selector({
  key: "charState",
  get: ({ get }) => {
    const name = get(nameState);
    return name.length;
  },
	// get 메소드를 사용하면 다른 atom의 default 값을 불러 올 수 있다.
});

export { pageNameState, charState };

 

🤔 atom과 selector의 차이점
: atom은 default 속성 필수 (initalState 느낌)

selector는 get 메소드를 사용하여 atom의 default를 불러와서 사용한다. (middleware 느낌)

 

4) /pages/test, /pages/test2 파일을 생성한다.

// pages/test.js

import Link from "next/link";
import { useRecoilState } from "recoil";
import { pageNameState } from "../recoil/states";

const IndexPage = () => {
  const [pageName, setPageName] = useRecoilState(pageNameState);

  return (
    <div>
      <div>
        <h1>Index Page!</h1>
      </div>
      <div>
        <span>pageName 상태: {pageName}</span>
      </div>
      <div>
        <button
          onClick={() => {
            setPageName("IndexPage");
          }}
        >
          현재 페이지 이름으로 상태 변경
        </button>
        <Link href="/test2">
          <button>Post Pages 이동</button>
        </Link>
      </div>
    </div>
  );
};

export default IndexPage;

// pages/test2.js

import Link from "next/link";
import { useRecoilState } from "recoil";
import { pageNameState } from "../recoil/states";

const PostPage = () => {
  const [pageName, setPageName] = useRecoilState(pageNameState);

  return (
    <div>
      <div>
        <h1>Post Page!</h1>
      </div>
      <div>
        <span>pageName 상태: {pageName}</span>
      </div>
      <div>
        <button
          onClick={() => {
            setPageName("PostPage");
          }}
        >
          현재 페이지 이름으로 상태 변경
        </button>
      </div>
      <Link href="/test">
        <button>Index Pages 이동</button>
      </Link>
    </div>
  );
};

export default PostPage;

 

🤔 useRecoilState와 useRecoilValue의 차이점

- useRecoilState는 이름 끝에 있는 state처럼

const [state, setState] = useRecoilState() 이런 식으로 사용하고, setState를 사용하여 default 값을 변경 할 수 있다.

- useRecoilValue는 이름 끝에 있는 value처럼

const state = useRecoilValue() 이런 식으로 사용하고, 읽기만 가능하다. 값 수정 안됨

---

next.js에서 recoil 사용하기

next js 에 recoil 적용하기