Recoil로 상태관리 하기

React 프로젝트에서 상태 관리 라이브러리인 Recoil을 사용하여 상태 관리하는 방법을 간단하게 정리한 글입니다.

1. 설치하기

npm install recoil 명령어를 입력하여 라이브러리를 설치해 줍니다.

2. Recoil Root 설정하기

리코일을 사용하고자 하는 컴포넌트 부모 트리를 리코일 루트로 감싸줍니다.
아래의 코드에서는 최상위 App 컴포넌트를 감싸주었습니다.

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

3. Atom

Atom은 상태의 일부를 나타내며 Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있습니다. Atom의 값을 읽는 컴포넌트들을 암묵적으로 Atom을 구독하여 어떤 변화가 일어나면 해당 Atom을 구독하는 모든 컴포넌트들이 재랜더링 될 수 있습니다.

우선 App 컴포넌트에서 Atom을 생성합니다.

export const textState = atom({
	key: 'textState', // 고유한 key 값 보통 변수명과 동일하게 설정
	default: '', // 기본값
});

function App() {
	return (
      <div>
        <TextInput/>
        <CharacterCount/>
      </div>
    );
}

TextInput 컴포넌트에서 만들어 놓은 Atom을 읽고 쓸 수 있도록 useRecoilState()를 사용해줍니다.

const TextInput = () => {
  const [text, setText] = useRecoilState(textState);
  
  const onChange = (event) => {
    setText(event.target.value);
  };
  
  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      Echo: {text}
    </div>
  );
}

위의 코드에서 onChange 이벤트가 발생하여 text가 변하게 되면 Echo 부분의 text 부분도 함께 재랜더링 되며 입력하고 있는 텍스트가 보여지게 됩니다.

4. Selector

Selector는 atom 또는 다른 selector의 상태를 입력받아 동적인 데이터를 반환합니다. 이때 Selector가 참조하던 상태의 값이 변경되면 같이 업데이트 되며 Selector를 바라보던 컴포넌트들도 재 랜더링 됩니다.

export const textState = atom({
	key: 'textState', // 고유한 key 값 보통 변수명과 동일하게 설정
	default: '', // 기본값
});

📌 export const charCountState = selector({
  key: 'charCountState', // 고유한 key 값
  get: ({get}) => {
    const text = get(textState); // textState값을 가져옴
    return text.length; // 데이터 반환
  },
});

function App() {
	return (
      <div>
        <TextInput/>
        <CharacterCount/>
      </div>
    );
}

Selector의 값을 가져오기 위해서 useRecoilValue()를 사용해 줄 수 있습니다.

const CharacterCount = () => {
  const count = useRecoilValue(charCountState);
  return (
    <>Character count: {count}</>; // text의 글자수가 표시됨
  );
}

이렇게 하면 count는 text값이 바뀔때마다 해당 카운트 숫자가 변경되어 화면에 랜더링 됩니다.