
📌 전역 상태 관리
- Props Drilling에서 발생하는 문제를 해결하기 위해 상태를 컴포넌트에서 선언하지 않고 전역으로 관리
- 전역 상태 관리 저장소에서 중간 컴포넌트를 거치지 않고 바로 사용 → 효율적인 개발 가능
- Ex) Context API, Redux, Recoil
💡Props Drilling이란?
- 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것
- 단점: 중간 컴포넌트는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 해당 값을 사용하지 않는 경우에도 프로퍼티를 받고 전달해야합니다.
📌 Recoil
- Facebook에서 개발한 전역 상태 관리를 위한 라이브러리
- 다른 라이브러리(Redux, Mobx)와는 달리 React 전용이며 React에 최적화 되어있습니다.
→ 전역상태 값을 state처럼 간단한 get/set 인터페이스로 사용 가능 - 변경된 상태가 실제로 필요한 컴포넌트만 리렌더링되도록 할 수 있습니다.
→ 불필요한 리렌더링을 방지 - 값만 필요한 경우와 값을 수정하는 함수만 필요한 경우를 분리하여 사용 가능
1️⃣ Recoil 설치하기
- npm 사용
npm install recoil
- yarn 사용
yarn add recoil
2️⃣ RecoilRoot 제공하기
- Recoil을 사용하려면 애플리케이션의 최상위 컴포넌트에 'RecoilRoot' 컴포넌트를 씌우면됩니당
// index.js 또는 App.js 등에서
import React from 'react';
import { RecoilRoot } from 'recoil'; // RecoilRoot import 해오기
import App from './App';
// 최상위 컴포넌트인 <App />을 감싸준다.
ReactDOM.render(
<RecoilRoot>
<App />
</RecoilRoot>,
document.getElementById('root')
);
3️⃣ Atom 사용하여 Recoil 상태 정의하기
- Atoms
- Redux에서 쓰이는 store와 유사한 개념으로, 상태(state)의 단위
- 어떤 컴포넌트에서나 읽고 쓸 수 있습니다.
- atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독
→ atom이 업데이트 되면, 해당 atom을 구독하는 모든 컴포넌트는 새로운 값을 반영하여 다시 렌더링! - Atoms는 atom함수를 사용해 생성
// atoms.js
import { atom } from 'recoil';
const exampleState = atom({
key: 'exampleState', // 고유한 key 값
default: '', // 해당 atom의 초기값
});
4️⃣ 전역 상태 관련 Hooks
- 전역 상태(Atoms, Selector)를 get/set 하기 위해 Recoil에서 제공하는 Hooks를 사용
- useRecoilState(): [state, setState] 튜플에 할당, 인자에 Atoms(or Selector)를 넣어줍니다.
- useRecoilValue(): 전역상태의 state 상태값만을 참조하기 위해 사용
- useSetRecoilState(): 전역상태의 setter 함수만을 활용하기 위해 사용
- useResetRecoilState(): 전역상태를 default(초기값)으로 Reset하기 위해 사용
import { useRecoilState, useSetRecoilState, useResetRecoilState } from 'recoil';
import { exampleState } from '../../recoil/atoms';
function RecoilTest() {
const [ example, setExample ] = useRecoilState(exampleState); // useRecoilState 을 통한 value, setter 반환
const countValue = useRecoilValue(exampleState); // 구독하는 atom의 값만 반환
const setCountUseSetRecoilState = useSetRecoilState(exampleState); // 값을 변경하는 함수만 반환(setter)
const resetCount = useResetRecoilState(exampleState); // 설정된 초기값으로 Reset
return ();
}
export default RecoilTest;
5️⃣ Selectors
- atoms나 다른 selectors를 입력으로 받아들이는 순수함수(pure function)
- 상위의 atoms 또는 selectors가 업데이트되면 하위의 selector 함수도 다시 실행됩니다.
- 컴포넌트들은 selectors를 atoms처럼 구독할 수 있으며 selectors가 변경되면 컴포넌트들도 다시 렌더링됩니다.
- selectors는 selector함수를 사용해 정의
- get 속성은 계산될 함수로, get 인자를 통해 atoms와 다른 selectors에 접근할 수 있습니다.
+) 현재 exampleSelector는 writable하지 않기 때문에 useRecoilValue()를 사용해 값을 읽을 수 있습니다. (readonly)
import { selector } from 'recoil';
import { exampleState } from './atoms';
export const exampleSelector = selector({
key: 'exampleSelector', // 고유한 key 값
get: ({ get }) => {
const value = get(exampleState);
// 추가적인 계산 로직 수행
return transformedValue;
},
});
🍀 참고자료
'Frontend > React' 카테고리의 다른 글
| [React] 프론트엔드 프로젝트 초기 세팅 (w/ 웹스톰) (1) | 2024.08.28 |
|---|---|
| [React] 더미 데이터(Dummy Data) 구현 (1) | 2024.01.28 |