Recoil, 왜 사용해야할까?

Recoil, 왜 사용할까?

• Context API는 Provider 하위의 모든 컴포넌트가 상태 변화 시 리렌더링
• 전역 상태 관리 코드가 굉장히 간결하며, 사용이 간편함.
• 페이스북에서 공식적으로 만들었으며, 권장하는 전역 상태 관리 툴
• 서버 상태/클라이언트 상태를 분리할 때, 코드 복잡도가 매우 낮아짐.

1. Redux보다 좋아?

Redux의 동작 원리

• MVC패턴의 문제점

  • 페이스북에서 MVC패턴의 고질적인 문제를 해결하기 위해 만든 패턴
    • 규모가 커져 수많은 Models, Views가 생기면 복잡도가 엄청나게 증가함.
  • 
  • Model이 늘어날수록 전파해야할 대상도 증가해 신속하지 못하며, 모델에서 전파된 이벤트가 모든 Views에 예측이 불가하게 전파된다.

• Flux패턴

  • View가 Model을 변경할 수 없는 단방향 데이터 흐름
  • Action: 상태 변화 담당
  • Dispatcher: 데이터 저장소(Store)로 Action의 메세지를 전달
  • Model: 데이터 저장소(Store) 역할. Action의 타입에 맞게 상태 변화
  • View: 컴포넌트 및 페이지. 상태 변화 시, 해당 상태를 가진 컴포넌트를 리렌더링
    

• Redux는 Flux패턴과 유사하지만 다르다.

  • Redux는 싱글톤패턴을 사용
  • Reducer로 상태 관리를 넘기고 그 조각들을 단 하나의 거대한 저장소에 묶어서 사용함. (Dispatch, Store)

Recoil의 동작 원리

• Atoms

  • Atom은 저장소의 역할을 하며, 상태의 작은 단위임
  • Atom은 unique key로 구분되며, Atom의 상태가 바뀌면 구독하는 모든 컴포넌트가 리렌더링됨.(동일한 상태를 공유함)
  • 

• Selector

  • Atom의 상태를 바탕으로 함수 연산을 통해 새로운 값을 반환하는 순수 함수. 기본적으로 연산된 값을 캐싱한다.
  • 말이 어려워보이지만, 값을 가공해서 계산된 값을 내뱉는 함수임.
  • 기존의 Atom의 상태가 변화하면 Atom을 구독하는 모든 Selector들도 다시 실행.(종속 관계)
  • Selector의 장점은 기존에는 상태를 보존하면서 값을 가공하기 불편했던 문제가 해결된다는 점이다.

2. Recoil 사용법

• Atom

  • 선언

    export const smallState = atom({
    		key: 'smallState', // 고유한 키 값
    		default: "작은 상태",
    });
    

  • 참조 & 상태 변화

    function SmallStateComponent() {
        const [smallState, setSamllState] = useRecoilState(smallState);
        return (
    	  <div>{smallState}</div>
          <button onClick={() => setSmallState("다른 작은 상태")}>
            상태를 바꿔보자
          </button>
    	 );
    }
    

  • 상당히 useState와 유사하다. Redux와 다르게 React스러운 상태관리임을 알 수 있다.

• Selector

  • 캐싱이 자동으로 이루어짐.
  • atom에 종속되어 항상 같은 값을 반환해야함
  • 참조 시에, read-only

    import { dataList } from "./atom";
     export const userSelector = selector({
       key: "mySelector",
       get: (params) =>
         ({ get }) => get(dataList).filter((myData)
    }
    );

• SelectorFamily
  • 파라미터를 통한 동적인 변화에 대응

    import { dataList } from "./atom";
     export const userSelector = selectorFamily({
       key: "mySelector",
       get: (params) =>
         ({ get }) => get(dataList).filter((myData) => myData.id.includes(`${params}`))
    }
    );