[ JavaScript / React ] recoil 사용 - 외부 상태 저장소 만들기

환경 : Visual Studio Code

로그인을 구현하기 앞서, 세션이 어떻게 변화하는지를 이해하고 있으면 좋다. 

 

 

Monolithic : 단단히 짜여 하나로 되어 있는 

• 개발과 관리가 용이
  → 모든 기능들이 하나의 시스템에서 동작하기 때문
• 시스템이 복잡해지고 커질수록 코드를 이해하기 어려워짐

 

MSA : MicroService Archtecture

• 여러 모듈을 조합하여 애플리케이션을 구현하는 방식
• 독립적이고 확장성을 고려한 설계가 어렵지만 시스템이 커질수록 좋음 (유지보수 쉬움)

 

---

 

리코일을 이용하여 상태 관리를 해보자

Recoil : https://recoiljs.org/ko/docs/introduction/core-concepts

 

 

 리코일을 사용하고자 하는 곳에 설치해준다.

npm install recoil

 

 

   (알아서 다 추가됨. 재실행하고 사용하면 됨!)

---

리코일을 이해하기 위해 간단한 예제 실습을 해보자. 

 - 컴포넌트 안에 다른 두개의 컴포넌트를 자리잡게 하지만, 하나의 함수를 다 같이 사용하게 끔 구현해보도록 하겠다. 

 

 

    - 실행 결과

+ / - 버튼으로 count의 수가 증감한다.

 

리코일을 사용하기에 앞서 먼저 index.js에 recoil 뿌리 영역을 설정해준다. 

   - index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

//bootstrap
import "bootstrap/dist/css/bootstrap.min.css";
import "bootswatch/dist/cosmo/bootstrap.min.css";
import './index.css';

import "bootstrap"; //js는 경로를 생략해도 기본 경로로 설정됨
import { HashRouter } from 'react-router-dom';
import { RecoilRoot } from 'recoil';

const root = ReactDOM.createRoot(document.getElementById('root'));
//<React.StrictMode>가 있으면 리액트가 화면을 두 번씩 실행한다.(한 번은 테스트)
//통신 등에서 문제가 될 수 있으므로 사용하지 않는 것을 권장
root.render(
  <>
    {/* 리코일을 사용하는 영역 지정 */}
    <RecoilRoot>
      {/* 리액트 라우터를 사용하는 영역을 지정 */}
      <HashRouter>
      <App />
      </HashRouter>
    </RecoilRoot>
  </>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

모든곳에서 사용할 state를 만든다

   - RecoilData.js

//Recoil을 이용해서 전체 애플리케이션에서 사용할 데이터를 선언
// - 기존의 Spring Boot에서 사용하는 HttpSession을 대체할 예정

import {atom} from "recoil";

//atom은 recoil 저장소에 변수를 생성하는 역할
const countState = atom({
    key : 'countState',//식별자(ID)
    default : 0 //초기값
});

//default export는 하나밖에 할 수 없다
//export default countState;

//naming export는 여러 개 할 수 있다
export {countState};

     (+) 변수 생성 역할을 하는 atom 을 사용하여 countState 함수를 생성한다. 

     (+) export default로 추출하는 것은 하나의 함수만 가능하다. 

          단, naming export는 여러 개 가능하다. 

 

 

    - CountEx.js

import Jumbotron from './../Jumbotron';
import CountMinus from './CountMinus';
import CountPlus from './CountPlus';

import { countState } from '../utils/RecoilData'; //recoil 함수 불러오기
import { useRecoilState } from 'recoil';


const CountEx = () =>{
    //state
    // const [coutn, setCount] = useState(0); //이 컴포넌트에서만 사용; 지역상태
    const [count, setCount] = useRecoilState(countState);//Recoil에서 불러와서 사용 //전역상태
    
    return(
        <>
            <Jumbotron title ="리코일 이해를 돕기 위한 카운트 예제"/>

            <div className='row mt-4 text-center'>
                <div className='col'>
                    <h1>count = {count}</h1>
                </div>
            </div>

            <div className='row mt-4 text-center'>
                <div className='col-6'>
                    <CountMinus />
                </div>
                <div className='col-6'>
                    <CountPlus />
                </div>
            </div>
        </>
    );
};

export default CountEx;

      (+) 여기서 사용하고 있는 state 값은 recoil에서 불러와 사용하는 것이다. 즉, RecoilData.js 파일의 값을 가져와 활용하는 것이다. 

       (+) 리코일의 count 변수를 가져와 사용할 자리 잡아주었다

       (+) CountMinus와 CountPlus 자바스크립트 파일도 불러올 곳을 활용해준다 

 

    - CountPlus.js

import { FaPlus } from 'react-icons/fa6';

import { countState } from '../utils/RecoilData';
import { useRecoilState } from 'recoil';

const CountPlus = ()=>{

    //state
    const [count, setCount] = useRecoilState(countState);//Recoil에서 불러와서 사용

    return (
        <>
            <h1>CountPlus.js</h1>
            <button className="btn btn-lgn btn-primary" onClick={e=>setCount(count+1)}>
                <FaPlus />
            </button>
        </>
    );
};

export default CountPlus;

      (+) Recoil에서 불러와 setCount를 이용해 count의 값에서 +1되도록 설정해준다

 

    - CountMinus.js

import { FaMinus } from 'react-icons/fa';

import { countState } from '../utils/RecoilData';
import { useRecoilState } from 'recoil';

const CountMinus = ()=>{

    //state
    const [count, setCount] = useRecoilState(countState);//Recoil에서 불러와서 사용

    return (
        <>
            <h1>CountMinus.js</h1>
            <button className="btn btn-lgn btn-primary" onClick={e=>setCount(count-1)}>
                <FaMinus />
            </button>
        </>
    );
};

export default CountMinus;

      (+) Recoil에서 불러와 setCount를 이용해 count의 값에서 -1되도록 설정해준다

 

 

 

 

개인 공부 기록용입니다 :)