Redux란?
Flux패턴
이전의 프론트엔드의 대다수는 MVC패턴이였다. 그러나, 시간이 지나면서 수많은 View와 Model들이 생겨 구조가 복잡해졌다. 이에 페이스북은 Flux라는 패턴을 발표하게 된다. Flux패턴은 어떤 Action이 발생하면 Dispatcher에 의해 store에 변경된 사항이 저장된다. 그리고 저장된 데이터들에 의해 view가 변경되는 단방향 패턴이다.
-
Action: action은 데이터의 시작이라고 볼 수 있다. action은 data를 가지고 있다고 생각하고 행동만 취할수 있다.
-
Dispatcher: dispatcher는 action을 받아서 store로 넘겨준다. 여기에는 callback을 등록할 수 있는데, 이 callback에서 여러 데이터들의 처리가 발생한다.
-
Store: store는 dispatcher에 callback에서 처리된 data를 저장하는 곳이다. 그리고 해당 데이터를 view에 전달해준다.
-
View: 해당 데이터들을 가지고 와서 렌더링 해준다.
Redux
Redux는 Flux패턴을 적용한 React 상태 관리 라이브러리다. Store에 상태들을 저장하고, 해당 변화가 필요할 때, Action을 Dispach하여 Reducer에서 받아 정해놓은 흐름으로 상태를 변화시키는 방식이다. 기본적인 원리는 Flux랑 비슷한데 데이터의처리를 Reducer가 할 뿐이다. Reducer는 반드시 새로운 객체를 반환해야 한다. 기존의 data에 직접적인 변경을 명령할 순 없다.
Redux의 장점으로는
-
디버깅이 쉽다: Redux를 사용하면 디버깅을 쉽게 할 수 있다.
-
상태를 예측할 수 있다: Redux는 동일한 상태와 액션이 Reducer로 전달되는 경우, 순수 함수 이기 때문에 동일한 결과를 얻을 수 있다. 상태 또한 변할수 없다.
-
SSR: Redux는 서버 사이드 렌더링을 위해 사용할 수 있다.
-
커뮤니티 활성화: React와 Redux의 공식 바인딩 라이브러리인 React-Redux는 대규모 커뮤니를 구축하고 있다.
위에서 본 Redux는 React에서 볼 수 있는 데이터의 흐름을 그대로 구현해놓은 라이브러리이다.
그러나 Redux도 단점이 있다.
-
복잡한 코드: Redux를 활용하기 위해서는 action, dispathcer, reducser, store 등 구현해야 할 기본 코드들이 많다.
-
복잡한 개념: Redux를 이해하려면 데이터의 흐름을 추상화하여 이해해야 하는데 쉽지 않다.
Recoil
Recoil은 React의 공식 상태 관리 라이브러리는 아니지만 페이스북의 팀인 React를 개발한 사람들에 의해 제작되었다. 그럼에도 불구하고 React의 많은 사용자들에 의해 채택을 받았다. Recoil은 중요한 핵심개념 atom과 selector가 있다.
- atom
Recoil을 설명해주는 유튜브를 보면 atom을 비눗방울로 추상화하여 설명한다. 우리가 만드는 웹 애플리케이션을 구조화 하면 그 상단에는 비눗방울처럼 떠다니고 있다고 추상화한다. 만약 개발자가 어느 비눗방울이 필요하다면 해당 비눗방울만 쉽게 사용할 수 있다. 이러한 atom에는 우리가 사용할 상태(state)를 담는다. 즉, 우리가 사용하길 원하는 state를 atom이라는 비눗방울을 띄워 언제든지 사용 가능하다는 것이다.
import { atom } from "recoil"
export const userInfo = atom({
key: "userInfo",
default: {
id: "Admin",
pwd: "1234",
},
});
export const counting = atom({
key: "counting",
default: 0,
});이 코드를 살펴보면 Recoil에서 atom을 import하고, atom이라는 함수에 key와 defaul로 이루어진 객체를 넣어준다. 여기서 key는 atom을 구분해 줄 고유의 값이고, default는 해당 key값을 가진 atom의 기본값으로 설정해줄 value값을 넣어주면 된다. 이렇게 전역상태 하나를 구현했다.
import { useRecoilState } from "recoil";
export function Example() {
const [count, setCount] = useRecoilState(counting);
}Recoil은 userRecoilState라는 hook을 recoil 라이브러리에서 가져와, 위에 정의한 atom을 넣어주면서 값을 추적해 사용한다. 이렇게 간단한 Hook을 사용하여 atom을 가져와 값을 추적하고 변경할 수 있다.
- selector
selector 은 atom 을 활용해 개발자가 원하는 대로 값을 뽑아서 사용할 수 있는 API 이다. 즉, atom을 원하는 대로 변형해 값을 리턴받는다라고 생각할 수 있다. 또한 selector 은 읽기 전용값 만을 반환한다. 따라서 Recoil 을 활용할 때 수정 가능한 값을 반환 받고자 한다면 반드시 atom 을 활용해야 한다.
Recoil의 장점으로는
-
redux 와 비교했을때 적은 학습곡선을 가지고 있고, 코드량도 recoil 이 훨씬 적다.
-
상태 변경으로 인한 불필요한 렌더링이 발생하지 않는다. (상태를 구독한 컴포넌트만 리렌더링 발생)
-
저장소 개념보다는 작은 상태 단위(atom)로 관리한다.
Recoil의 단점으로는
- Redux처럼 Devtool이 아직없다.
- 대규모 프로젝트에 적용하기에는 좋은 사례라던가 레퍼런스들이 부족하다.
