■ 상태란, State란?
가장 먼저 상태의 개념에 대해 짚고 넘어가자. 리액트 공식 문서에서는
웹 어플리케이션을 렌더하는데 있어 영향을 미칠 수 있는 값 이라고 정의한다.
(React Component에서 변경가능한 데이터를 state라고 부릅니다.)
그럼 상태의 종류는 어떤게 있을까?
■ 상태의 종류
상태는 범위의 개념에서 전역상태, 컴포넌트간 상태, 지역상태 로 나눌 수 있다.
- 전역상태는 프로젝트 전체에 영향을 끼치는 상태 : 유저기능등등
- 컴포넌트간 상태는 여러가지 컴포넌트에서 관리되는 상태 : 모달(상위 컴포넌트에서 prop을 넘겨받아 해당 컴포넌트까지 전달되도록 하는 Props Drilling)
- 지역상태는 특정 컴포넌트 안에서만 관리되는 상태 : input, selectbox 등등
■ 상태관리 필요이유
서로 다른 컴포넌트가 같은 데이터가 필요하다고 할 때, 컴포넌트가 부모 자식 관계가 아닌이상 직접적인 데이터 전달이 어렵다. Prop Drilling으로 해결할 수 있으나, 복잡해지고 상태가 많아질 수록 prop이 어디에서 왔는지 찾기 어려워진다.(안복잡해도 잘 헤매는 나에요..)
즉 컴포넌트간의 불필요한 리렌더링을 방지하여 웹 성능 저하를 막기 위해 필요합니다.
■ 상태관리 Tool의 종류
위와 같은 이유로 각 프로젝트에 맞는 상태관리 툴을 선택해서 상태를 관리하는 것이 중요하다. 그럼 상태관리를 위한 Tool에는 어떤게 있느냐,,
ContextAPI, Redux,zustand, Recoil, MobX, React Query 등이 있다.
■ ContextAPI
context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 텀포넌트 트리 전체에 데이터를 제공할 수 있다.
ContextAPI는 리액트 자체에서 상태를 관리할 수 있도록 제공하는 훌륭한 Tool 중 하나입니다. Context, Provider, Consumer로 설명할 수 있습니다.
ContextAPI는 성능적인 이슈가 여전히 존재합니다. 값에 변화가 발생했을 때 Context를 구독하고 있는 모든 컴포넌트들이 전체적으로 모두 리렌더링 되거나,
범위를 제대로 지정하지 않았을 때 불필요한 리랜더를 일으키기도 합니다.
만약 반복적이고 복잡한 업데이트와 관련된 부분에서는 비효율적일 수 있다. 라는 뜻
■ Redux
redux 공식문서 : https://ko.redux.js.org/introduction/getting-started/
Redux는 전역 상태관리를 위한 라이브러리로, 현재 React에서 가장 많이 사용되는 State관리 라이브러리입니다.
프로젝트 전체에 대한 중앙 저장소 역할을 합니다. 즉 Vue, Vanilla JS등에서도 사용 가능한 모든 자바스크립트앱을 위한 상태관리 도구 입니다. (리액트만을 위한 도구가 아니다.)
Redux는 Flux 아키텍처의 구현체로 Store, Reducer, Action 구조로 구성되어 있습니다.
Store 는 저장소, 즉 전역상태를 저장하는 공간이며 오직 reducer를 통해서만 접근 가능하다. 여러개의 Context를 만들 수 있는 Context API와는 다르게 Redux에서 Store는 1개만 존재한다.
Action은 Reducer에게 보내는 Store에 대한 행동을 정의하는 자바스크립트 객체로 상태에 어떤 변화가 필요할 때 액션을 발생시킨다. 이 때 전달하기 위해 dispatch 메소드를 사용해야한다. Store의 내장 함수 중 하나인 dispatch는 액션객체를 넘겨줘서 상태를 업데이트 한다. 즉, 이벤트를 일어나게 하는 이벤트 트리거의 역할~
Reducer는 이전 상태와 액션을 받아 다음상태를 반환하는 역할을 하는 순수함수로 Reducer를 통해서만 전역 상태를 변경하고 업데이트 할 수 있다.
- 순수함수란? 다른 외부의 상태를 변경하지 않으면서도, 어떤 동일한 인자에 대해 항상 동일한 값을 리턴하는 함수
누가 왜 Reduc를 쓰냐고 묻거든
규모가 큰 애플리케이션의 Props drilling을 최소화하여 불필요한 리렌더링을 방지하고 상태를 보다 더 효율적으로 관리하여 성능 최적화하기 위해 사용한다고 대답하자.
■ Recoil
rocoil 공식문서 : https://recoiljs.org/ko/docs/introduction/getting-started/
2020년 facebook에서 발표한 리액트 전용 상태관리 라이브러리로 2015년 만들어진 redux에 비해 역사는 오래되지 않았지만 React hook Api와 밀접하게 통합되어 있어서 React개발자들에게 더 친숙한 패턴을 제공합니다.
🎤Redux와 recoil 의 차이점은?
1) Redux는 단일 스토어를 사용하여 애플리케이션의 상태를 관리하는 반면, Recoil은 여러개의 "atom", "selector"를 사용하여 상태를 관리합니다.
2) Redux는 오랜 기간 동안 사용되어 왔으며, 강력한 개발 도구 방대한 생태계를 자랑합니다. 반면, Recoil은 비교적 새로운 라이브러리입니다. Redux만큼 방대한 개발 도구와 생태계를 갖추고 있지는 않지만, Recoil은 지속적으로 성장하고 있으며, 커뮤니티의 관심과 기여도 빠르게 증가하고 있습니다.
결론적으로, Recoil은 React의 최신 기능과 밀접하게 통합되어 있는 모던한 상태 관리 라이브러리로, 상태 관리를 더 직관적이고 모듈화된 방식으로 접근하려는 개발자에게 적합할 수 있습니다. 그리고 Redux는 검증된 안정성, 강력한 개발 도구, 그리고 방대한 생태계를 필요로 하는 대규모 애플리케이션에 더 적합할 수 있습니다.
📚 Reference
