우선 상태관리도구란?
👉상태
- React에서 State는 component 안에서 관리되는 것
👉component 간의 정보 공유
- 자식 컴포넌트들 간의 다이렉트 데이터 전달 불가능
- 부모 컴포넌트를 통해 주고 받음
- 자식이 많으면 상태 관리 매우 복잡
- 상태를 관리하는 상위 컴포넌트에서 계속 내려받는 props drilling 이슈가 생김
👉 상태 관리 라이브러리(툴)을 써야하는 이유
- 전역 상태 저장소 제공
- props drilling 이슈 해결
상태관리 사용량 비교
확실히 react-redux가 recoil보다 압도적으로 많이 사용함
그렇다면 Redux란?
Javascript 상태관리 라이브러리
상태(State)는 컴포넌트 내부에서 사용하는 데이터, 컴포넌트 내부에서 사용하는 데이터
Redux의 원칙
1. Single source of truth
- 동일한 데이터는 항상 같은 곳에서 가져옴
- 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미
2. State is read-only
- 리액트에서 setState 메소드를 활용해야 상태 변경이 가능
- 리덕스에선 액션이라는 객체를 통해서만 상태 변경 가능
3. Changes are made with pure functions
- 변경은 순수함수로만 가능
- 리듀서와 연관되는 개념
- Store(스토어)-Action(액션)-Reducer(리듀서)
Store, Action, Reducer의 의미와 특징
Store(스토어)
상태가 관리되는 하나의 공간
- 컴포넌트와 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담음
- 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근
Action(액션)
- 앱에서 스토어에 운반할 데이터
- 자바스크립트 객체 형식으로 되어 있음
Reducer(리듀서)
- Action을 Store에 바로 전달하는 것이 아닌, Reducer에 전달
- Reducer가 주문을 보고 Store의 상태를 업데이트함
- Action을 Reducer에 전달하기 위해서는 dispatch 메서드를 사용
Dispatch(디스패치)
- Dispatch는 store의 내장 함수 중 하나, action을 발생시킴
- action을 파라미터로 전달하고 reducer를 호출
Subscribe(구독)
- Store의 내장 함수 중 하나, 특정 함수를 전달해주면 action이 dispatch되었을 때마다 전달된 함수가 호출
Action 객체가 dispatch() 메서드에 전달 -> dispatch()를 통해 Reducer를 호출 -> Reducer는 새로운 Store를 생성
Redux의 장점
- 순수 함수 사용해 상태 예측 가능
- 유지 보수 용이
- Redux dev tool이 있어 디버깅에 유리(오류 찾기 쉬움)
- 비동기 지원하는 Redux Sage, Redux Thunk 등 다양한 미들웨어가 존재
그렇다면 Recoil은??
페이스북에서 만든 React 상태 관리 라이브러리
react가 기본적으로 단방향 데이터 흐름이고 복잡한 상태 관리를 위해 상태를 끌어올리거나 redux같은 상태관리 라이브러리를 사용해야하지만,
recoil은 기존 react 컴포넌트 내에서 상태를 관리할 수 있게 해줌
Recoil 특징
1. 기존 컴포넌트에서 상태 관리
Recoil은 React의 Context API와 유사한 방식으로 상태를 관리
컴포넌트 내에서 상태를 정의하고 사용, 다른 컴포넌트에서도 해당 상태를 사용할 수 있음
Redux와 같은 별도의 상태 관리 라이브러리를 사용하지 않아도 되는 장점
2. 비동기 처리
Recoil은 비동기 상태 관리도 지원
Promise나 async/await을 사용하여 비동기 처리, 상태 변화를 감지하여 자동으로 컴포넌트 업데이트함
3. DevTools 제공
개발자 도구 제공하여 상태 변화 쉽게 추적하고 디버깅 할 수 있음
Recoil은 부트캠프에서 사용해본적 없는 라이브러리이므로 예시를 한번 곱씹어보겠다
import { atom, useRecoilState} from 'recoil';
// 상태 정의
const counterState = atom({
key: 'counterState',
default: 0,
});
// 컴포넌트에서 상태 사용
function Counter() {
const [count, setCount] = useRecoilState(counterState);
function handleClick() {
setCount(count + 1);
}
return(
<div>
<p>Count : {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
}위의 코드를 처음 사용해보았기 때문에 해석해보자면
atom() 함수
- Recoil에서 상태를 정의하는 함수
- counterState는 하나의 원자상태(atom state)를 나타냄
이 상태는 key와 default속성을 가지고 있음
key속성은 상태를 식별하는데 사용되는 고유한 문자열
default속성은 초기 상태를 설정
Counter 함수 컴포넌트
- Counter 함수 컴포넌트는 Recoil 상태를 사용하는 React 함수 컴포넌트
useRecoilState()훅
- Recoil에서 상태를 읽고쓰기 위해 사용
- 훅은 하나의 Recoil 상태(atom state)를 사용하며,
배열의 첫 번째 요소는 현재 상태 값이고, 두 번째 요소는 상태를 업데이트하는 함수- counterState를 사용하여 현재의 count값을 가져오고, setCount 함수를 사용하여 이 값을 업데이트
handleClick 함수
- handleClick 함수는 버튼이 클릭되었을 때 호출
- 이 함수는 setCount 함수를 사용하여 count 값을 1 증가
Render 메소드
- Counter 컴포넌트는 count값을 화면에 렌더링하고, 클릭 이벤트가 발생했을 때 handleClick 함수를 호출하는 버튼을 렌더링
실제 사용하려는 프로젝트에서의 상태는?
해당 프로젝트는 책과 관련된 주제로 구성된 커뮤니티, 도서소개, 설문조사, 중고거래, 독립서점 소개 등등 다양한 컨텐츠를 제작한 사이트이다.
여기서 전역으로 상태 관리할 목적인 데이터 값은 유저 세션이고 해당 데이터를 전역관리해서 로그인시 어느 페이지에서도 로그인 상태를 유지시킬 목적으로 사용하였다.
수 많은 컴포넌트별 공유되어야 할 데이터들은 많이 있지만 왠만한 데이터들은 props 한두번으로 공유가 가능하였고,
그 중 전역관리할 데이터가 유저 데이터 1개 뿐이였기 때문에 recoil vs redux를 비교하게 되었다.
Recoil을 선택한 이유
1. 상대적 간편성
Redux는 액션, 리듀서, 스토어 등의 개념을 이해하고 사용해야 하는 반면, Recoil은 React의 상태를 직접적으로 관리할 수 있도록 돕고, 유지보수가 훨씬 간단하다
즉, 우리가 사용해야할 라이브러리는 Redux Toolkit이였는데, 해당 코드는 기본 코드량이 Recoil보다 압도적으로 커서 홈페이지 성능에 오히려 방해가 된다고 판단하였다.
2. 컴포넌트 간 통신
Redux에선 상태를 전달해야 업데이트가 되지만, Recoil에선 상태를 직접 공유하고 업데이트 할 수 있다
3. 렌더링 최적화
Redux에선 상태 변화에 따라 모든 하위 컴포넌트가 다시 렌더링 되는 문제가 발생될 수 있는데, Recoil은 상태의 변화가 해당 상태를 구독하는 컴포넌트에서만 영향을 미치도록 되어 있다.
사실 다양한 채택 이유가 있지만 그 중에서 가장 큰 이유는 바로
성능
그 자체에 초점을 두었기 때문이다.
코드가 많아지면 성능이 감소되는 문제가 있기 때문에 상대적으로 사용방법도 쉬우면서 코드량도 적은 Recoil이 우리 프로젝트에 적용한게 가장 큰 이유라 볼 수 있다.
실제로도 props로만 데이터 관리를 진행하다 코드 리펙토링을 하며 전역 상태 관리를 하다보니 성능 개선에 큰 도움이 되었을거라 판단된다
참고자료
https://hanamon.kr/%ec%83%81%ed%83%9c%ea%b4%80%eb%a6%ac%eb%8f%84%ea%b5%ac-%ed%95%84%ec%9a%94%ec%84%b1/
https://despiteallthat.tistory.com/192
