Redux 란?
상태관리 라이브러리입니다. 전역 상태를 관리할 수 있는 저장소인 Store 를 제공하여 기존 비효율적인 상태관리 문제를 해결합니다.
* 상태(state)란?
리액트라는 환경에서 예를 들어 본다면, 앱의 유동적인 데이터를 다루기 위해 특별히 관리하는 객체를 의미합니다. 네이버사이트로 예를 들어봅시다. 사용자가 키워드를 검색창에 작성하면 네이버 사이트는 검색하는 데이터마다 관련된 데이터를 각각 달리 보여줘야 합니다. 이처럼 사이트에서는 유동적인 데이터 (검색창에 입력한 데이터 )를 특별히 state라는 객체에 저장해 관리하며, 이 state를 보다 효율적으로 관리하는 라이브러리가 redux 입니다.
Redux의 세 가지 원칙
1. Single source of truth
상태를 저장하는 공간은 단 1개 , Store라는 공간 뿐입니다.
2. State is read-only
상태는 읽기 전용이라는 뜻으로,useSelector 로 받아온 state는 직접 변경할 수 없습니다. ( Action 객체로 상태를 변경해야합니다.)
3. Changes are made with pure functions
변경은 순수함수로만 가능합니다. 순수함수로 작성되어야 하는 Reducer와 연결되는 원칙입니다.
Redux 구조
Redux는 flux 디자인 패턴을 따르고 있습니다. Action(행위) → Dispatch(전달) → Reducer (처리) /Store(저장소) ->view (렌더링)순서로 데이터가 단방향으로 흐르는 것이 특징입니다. 그리고 Redux는 다음과 같은 순서로 상태를 관리합니다.
- 상태가 변경되어야 하는 이벤트가 발생하면(사용자가 +버튼을 누르면), 변경될 상태에 대한 정보가 담긴 Action 객체(count 값을 +1 해줘라는 정보가 담긴)가 생성됩니다.
- 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다.
- Dispatch 함수는 Action 객체를 Reducer 함수로 전달해 줍니다.
- Reducer 함수는 Action 객체의 값(count를 +1 )을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
- 상태가 변경되면, React는 화면을 다시 렌더링 합니다.
'react' 카테고리의 다른 글
| navigate 시 데이터 넘겨주기 (0) | 2023.07.13 |
|---|---|
| 재사용성 높은 공통 컴포넌트 제작기 (0) | 2023.07.08 |
| [ERROR]React Hook "useDispatch" cannot be called at the top level. (0) | 2023.04.29 |
| [react- redux ERROR]Expected the root reducer to be a function. Instead, received: 'undefined' (1) | 2023.04.24 |
| [ERROR] Objects are not valid as a React child (0) | 2023.04.22 |
