recoil

Recoil

프론트에서 자체적으로 생성되는 데이터는 어디다 넣어두냐! 라고 했을때 몇가지 방안들이 있지만, 그중에 recoil 이라는 라이브러리를 사용해보자

프론트에서 관리하는 데이터라고 해봤자 많은 부분을 차지하지 않을 텐데 리덕스를 사용하기에는 너무 헤비하기 때문에 recoil을 사용할 것이다

Recoil 설치

1. npm 사용자 : 터미널에 npm install recoil 을 입력
2. yarn 사용자 : 터미널에 yarn add recoil 을 입력

Recoil 세팅

//app.tsx 파일 
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
        //RecoilRoot로 모든 컴포넌트를 묶어주세요
      <Component />
    </RecoilRoot>
  );
}

Recoil 사용

Recoil에서는 Atom으로 state의 일부를 보여준다

그리고 컴포넌트들은 자신이 필요한 Atom을 참조하고 있다. 따라서 자신이 참조하고 있는 Atom에 변화가 있으면,해당 atom을 참조하는 모든 컴포넌트에서 리렌더링이 일어난다

// Atom
const textState = atom({
  key: 'textState', // state의 이름
  default: '', //초기값
});

위의 아톰을 실제로 사용하기 위해선 useRecoilState를 사용해야한다

useState를 import 하는 것 처럼 useRecoilState를 import한다

// TextInput 컴포넌트 
function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

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

위와같이 사용하게 되면, textState를 참조하고 있는 모든 컴포넌트에서 재렌더가 일어난다