쉬운 전역 상태 관리를 위한 "Recoil"

 

현재 프로젝트의 경우 권한 관리를 recoil 로 다루고 있다.

​

Rocoil 이란?

페이스북에서 발표한 React 전역 상태 관리 라이브러리이다.

usestate 만을 사용하여 상태 관리를 하게 되면 프로그램이 복잡하게 될 시,

props drilling이 일어나게 되는데, Recoil은 이러한 행위를 방지하게 해준다.

​

Recoil의 경우. React 에서 사용하는 라이브러리가 아닌, 외부 라이브러리로 아래의 링크에서 내용을 확인하면 된다.

 

Recoil

Recoil 라이브러리에 주요한 개념으로는 Atom 과 selector가 있다.

​

Recoil 에서 하나의 전역 상태를 Atom 이라고 하는데, Atom 에 있는 상태 값들은 모든 컴포넌트에서 접근이 가능하다. 백과사전 같은 느낌.

위의 그림을 보면 알 수 있듯 Recoil은 단방향 데이터 흐름을 가진다.

​

Atom 에 대하여 정리해 보면

1. Atom은 상태 단위이며, 업데이트와 참조가 가능함.

2. Atom이 업데이트 되면 각각의 컴포넌트들은 새로운 값을 반영하여 리렌더링 됨.

3. 컴포넌트 내부 상태 값 대신 사용될 수 있으며, 동일한 atom이 여러 컴포넌트에서 사용되는 경우 그 컴포넌트들은 상태를 공유한다.

 

 

Atom 생성 방법

const fontSizeState = atom({
  key: 'fontSizeState', // 고유한 키 값
  default: 14
});

 

atom의 키 값은 전역적으로 고유해야 한다.

여기서 등록된 전역 상태를 사용하기 위해서는 useRecoilState(키값) 으로 불러와주면 된다.

useState 처럼 사용하면 되지만, 다른 점은 state 는 내부 상태, Recoil은 전역 상태라는 것.

 

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  return (
    <button onClick={() => setFontSize((size) => size + 1)} 
        style={{fontSize}}>
      Click to Enlarge
    </button>
  );
}

 

해당 버튼을 누르게 되면, 폰트 사이즈가 1씩 증가하며, 모든 화면에서 증가된 폰트 사이즈가 적용된다.

​

selector 이란?

전역 상태를 기반으로 어떤 계산을 통해 새로운 값을 내뱉는 순수함수.

atom이나 또 다른 selector를 통하여 입력을 받을 수 있게 된다.

​

기본적이고 최소한의 상태값들은 atom에 저장해두고, seletor에 명시한 함수를 통하여 상태 값을 변경하면 된다.

 

selector 사용방법

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState', // 고유한 키 값
  get: ({get}) => {
    const fontSize = get(fontSizeState); 
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

 

get 에는 상태를 계산할 함수가 담겨져 있으며, get으로 전달되는 매개변수를 통하여 Atom이나 다른 Selector에 접근할 수 있음. 위와 같이 선언해주었으면 아래처럼 사용하면 된다.

 

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState);

  return (
    <>
      <div>Current font size: ${fontSizeLabel}</div>

      <button onClick={setFontSize(fontSize + 1)} 
        style={{fontSize}}>
        Click to Enlarge
      </button>
    </>
  );
}

 

seletor의 경우는 useRecoilValue(키값) 의 형태로 선언하여 사용할 수 있으며,

버튼 클릭 시 폰트 사이즈 증가와 동시에 fontSizeLabel 셀렉터에도 업데이트 되어 컴포넌트에 반영된다.

 

---

권한 관리 ?

​

권한 관리를 구현하는 방법에는 여러가지가 있겠지만... Recoil 로 선언한다면

전역 상태 관리인 점을 사용하여 login 여부를 Recoil에 선언해주고,

login 완료 되면 login여부를 true로 바꿔준다.

그리고 login 여부에 따라 app.js 에서 해당 주소지에 접속 가능하게 할건지 말건지를 분기하는 형식으로 구현한다.

 

// useState.ts
// 이걸 왜 파일명을 state 라고 한지도 모르겠음.. 

import { selector } from 'recoil';

// import { ACCESSTOKEN_KEY } from '../common/constants/user';

export const getUserIsLogin = selector({
	key: 'userLoginState',
	get: () => {
		// const accessToken = localStorage.getItem("ACCESSTOKEN_KEY");
		// return !!accessToken;
		return true;
	},
});

 

이런식으로 선언해두고 isLogin 값을 판별하여

app.js 에서 해당 루트에 접속 가능하게 할건지 분기만 해주면 된다.

 

( 여기서 보통 Private, Punblic 분리하여.. 로그인이 안되어 있는데 회원만 사용할 수 있는 화면에 접근하려고 하면 login 화면으로 강제 sending 시킨다던지의 기능을 추가하기도 하고, 더 나아가 관리자 계정의 화면 접근 여부 또한 분리가 가능하다.)

 

// PrivateRouter.js

import { useEffect } from 'react';
import { Navigate, Outlet } from 'react-router-dom';

import { URL } from '../common/constants/url';
// import useSnackBar from '@/hooks/common/useSnackBar';

const PrivateRouter = ({ isAuthenticated }) => {
	// const { showSnackBar } = useSnackBar();
	useEffect(() => {
		if (!isAuthenticated) {
			// showSnackBar('로그인 후 사용해주세요');
			console.log('로그인 후 사용해주세요')
		}
	}, [isAuthenticated]);

	return isAuthenticated ? <Outlet /> : <Navigate to={URL.LOGIN} replace />;
};

export default PrivateRouter;

 

// PrivateRouter.js

import { useEffect } from 'react';
import { Navigate, Outlet } from 'react-router-dom';
// import useSnackBar from '@/hooks/common/useSnackBar';

const PublicRouter = ({ isAuthenticated }) => {
	// const { showSnackBar } = useSnackBar();
	useEffect(() => {
		if (isAuthenticated) {
			// showSnackBar('로그인 상태에서 이용할수 없는 서비스입니다');
			console.log("로그인 상태에서 이용할수 없는 서비스입니다")
		}
	}, []);

	return isAuthenticated ? <Navigate to="/" replace /> : <Outlet />;
};

export default PublicRouter;

 

진짜 권한 관리 거의 안만들어놨네...;

// app.js
import React, { Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { useRecoilState, useRecoilValue } from "recoil";

import { getUserIsLogin } from "./store/userState";
import PublicRouter from "./router/PublicRouter";
import PrivateRouter from "./router/PrivateRouter";


const Contact = React.lazy(() => import("./components/pages/Contact"));

  return (
    <Suspense fallback={<Loading />}>
      {/* <BrowserRouter > */}
      <Routes>
        <Route path="/" element={<MainLayout />}>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route element={<PrivateRouter isAuthenticated={isLogin} />}>
            <Route path="/contact" element={<Contact />} />
          </Route>
          <Route element={<PublicRouter isAuthenticated={isLogin} />}>
            <Route path={URL.LOGIN} element={<Login />} />
          </Route>
        </Route>
      </Routes>
    </Suspense>
  );
};

 

대충 이런식으로 구조만 확인하면 되겠다.

나중에 권한관리 만들어진 것 코드 가져와보는 걸로...

 

---

​공식 문서를 읽거나 개발하며 느꼈던 뇌피셜로 작성하고 있으니, 
궁금하신 점이나 잘못된 점이 있다면 댓글 남겨주시면 감사하겠습니다.