비전공자의 공부일지 - Recoil 이란?

반응형

Recoil이란???

 

Recoil 은 React 애플리케이션을 위한 상태관리 라이브러리입니다.

 

Recoil은 Github에 14,000개 이상의 별이 있는 오픈 소스 상태관리 라이브러리이며 Facebook의 소프트웨어 엔지니어인 Dave McCabe가 발명했습니다. React 애플리케이션의 모든 구성 요소가 상태를 쉽게 공유할 수 있도록 전역 상태를 제공하며 Redux에 비해 최소화됩니다.

React에 offical 라이브러리는 아니라고 한다.

하지만 Facebook에서 만든 거라 React와 호환이 잘된다고 한다.

 

Recoil 공식사이트에 가면 간단한 사용 방법예제라고 있는데 이번엔 그걸 만들어 볼 생각이다.

https://recoiljs.org/ko/docs/introduction/getting-started

Recoil 시작하기 | Recoil

 

RecoilRoot

recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot 가 필요하다. 루트 컴포넌트가 RecoilRoot를 넣기에 가장 좋은 장소다.

 

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { RecoilRoot } from "recoil";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
	<React.StrictMode>
		<RecoilRoot>
			<App />
		</RecoilRoot>
	</React.StrictMode>
);

// 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();

 

Atom

Atom은 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트가 재 렌더링 되는 결과가 발생할 것이다.

 

app.js

export const textState = atom({
	key:'textState',
	default:''
});

export는 사용하지 않아도 되지만 나는 components 폴더를 만들어서 작업하기 위해서 사용하였다.

textState라는 이름의 변수를 만들고 그 안에 atom을 선언하며 사용될 key값과 기본값인 default가 있는 객체를 입력해 준다.

 

useRecoilState

 

textInput.js

import React from "react";
import { useRecoilState } from "recoil";
import { textState } from "../App";

const TextInput = () => {
	const [text, setText] = useRecoilState(textState);

    function handleChange(e){
        setText(e.target.value)
    }

    return (
        <div>
            <input value={text} onChange={handleChange} /><br/>
            Echo : {text}
        </div>
    );
};

export default TextInput;

textInput에서 App.js에서 만든 textState를 불러오기 위해 useRecoilState를 선언해 주었는데 useState와 비슷하게 생겼다. 하지만 useState와 다른 점은 usetState는 useState에 기본값을 넣어주고 그 값이 바뀌면 적용되는 방식인데 useRecoilState은 우리가 app에서 만든 textState라는 변수를 불러와서 사용할 수 있다.

굳이 app에서 안 만들고 textInput에서 만들어 주어도 되지만 그러면 useState를 사용할 거 같다. 그리고 변화되는 값도 부모에게 전달도 해야 되고 이런 면에선 확실히 편한 것 같다.

 

selector

selector이란 말 그대로 원하는 것을 선택한다고 생각하면 될 거 같다.

 

Selector는 파생된 상태(derived state)의 일부를 나타낸다. 파생된 상태는 상태의 변화다. 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물로 생각할 수 있다.

 

App.js

export const charCountState = selector({
	key:'charCountState',
	get:({get})=>{
		const test = get(textState);
		return test.length;
	}
})

 

이번에는 charCountState를 만들어서 selector을 불러와서 key값을 정해주고 get을 이용해서 우리가 원하는 데이터를 가져오는 거 같다. 공식 문서를 보니 switch를 이용해서 각 다른 값을 return을 하는 거 같던데 todoList 프로젝트를 할 때 한번 사용해 봐야겠다.

 

CharacterCount.js

import React from 'react'
import { useRecoilValue } from 'recoil'
import { charCountState } from '../App'

const CharacterCount = () => {
	const count = useRecoilValue(charCountState)
    return (
        <div>
		CharacerCount : {count}
        </div>
    )
}

export default CharacterCount

우리가 selector을 만들어 두었던 cahrCountState를 useRecoilValue를 이용해서 value를 가져올 수 있다.