리덕스란?
Javascript 상태관리 라이브러리이다.
리덕스의 기본 개념 : 세가지 원칙
1. Single source of truth
- 동일한 데이터는 항상 같은 곳에서 호출한다.
- 즉, 스토어라는 하나뿐인 데이터 공간이 있다
2. State is read-only
- 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다
- 리덕스에서도 액션이라는 객체를 통해서만 상태 변경이 가능하다
3. Changes are made with pure functions
- 변경은 순수함수로만 가능하다
- 리듀서와 연관되는 개념이다.
- Store - Action - Reducer
Store 란?
상태과 관리되는 오직 하나의 공간이다.
- 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 필요한 상태를 담는다
- 컴포넌트는 상태정보가 필요하면 스토어에 접근한다
Action 란?
액션은 앱에서 스토어에 운반할 데이터를 말한다.
액션은 객체 형식으로 되어있다.
{
type: 'ACTION_CHANGE_USER', // 필수
payload: { // 옵션
name: '하나몬',
age: 100
}
}
Reducer 란?
- 액션은 스토어에 바로 전달하는 것이 아닌 리듀서에 전달해야한다.
- 리듀서는 주문을 보고 스토어에 상태를 업데이트 하는것이다.
- 액션을 리듀서에 전달하기 위해서는 dispatch( ) 메소드를 사용해야한다
Action 객체가 dispatch ( ) 메소드에 전달된다
dispatch를 통해 reducer를 호출한다
reducer는 새로운 store를 생성한다
왜 이런 공식을 따를까?
이유는 데이터가 한 방향으로만 흘러야 하기 때문이다.
Redux의 장점
- 상태를 예측 가능하게 만든다
- 유지보수
- 디버깅에 유리
- 테스트를 붙이기 용의
'React' 카테고리의 다른 글
리액트의 내부 작동 원리를 재조정 (Reconciliation) 개념과 함께 설명하세요. (0) | 2022.07.01 |
---|---|
React의 개념과 장점, 그리고 컴포넌트란 무엇인가요? (0) | 2022.07.01 |
왜 React를 사용하는가 (0) | 2022.03.23 |
useCallback을 사용하여 함수 재사용하기 (0) | 2022.03.14 |
useMemo를 사용하여 연산한 값 재사용하기 (0) | 2022.03.14 |