[React] Redux란?

리액트 공부를 하다 리덕스를 사용하게 되었는데 리덕스...? 

리덕스 이론은 알겠는데 어떻게 적용해야할지 막막해져서 블로그 쓰면서 정리해보겠습니다!

 

 

🤔Redux(리덕스)란?

자바스크립트 상태관리 라이브러리로 ,자바스크립트 앱을 위한 예측가능한 상태 컨테이너입니다. 

리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있습니다. 

 

리덕스를 사용하는 이유 

리덕스가 등장하기 전 MVC 패턴 방식으로 데이터 흐름을 관리하였습니다. 

그림과 같이 State가 변화하게 되면 MVC에 이벤트가 발생하고 양방향의 데이터 흐름때문에 파악하기 힘든 구조로 되어있습니다.

위와 같이 양방향 데이터의 흐름이라는 문제점을 해결하기 위해 단방향 데이터 흐름이라는 라이브러리로 리덕스를 사용합니다. 

단방향 데이터 흐름의 라이브러리 사용으로 기존에 파악하기 어려웠던 관리를 예측이 가능하게 해주며, 뷰와 모델 사이의 state 전이를 간편화 해줍니다. 

 

기존 MVC 패턴의 State 변경 흐름
(한 번의 변경으로 수많은 상태 변경이 이루어짐) 

 

 

Redux 사용하여 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(액션) : 앱에서 스토어에 운반할 데이터 

- 디스패치의 파라미터로 전달될 데이터입니다. 

- 상태 값이 어떻게 변할지 행동을 적어놓는 객체를 말합니다. 

- 나중에 리듀서가 액션을 전달받으면 액션의 값에 따라서 다른 작업을 합니다. 

- 액션은 자바스크립트의 객체 형식으로 되어 있습니다. 

(액션 객체에는 type 프로퍼티를 무조건 포함하고 있어야 함) 

 

Reducer (리듀서) : 액션의 type에 따라 변화를 일으키는 함수 

- 액션을 스토어에 바로 전달하는 것이 아니라 리듀서에 전달하면 리듀서가 보고 스토어의 상태를 업데이트 합니다. 

- 액션을 리듀서에 전달하기 위해서는 dispatch()메소드를 사용합니다. 

- 스토어에 상태 값이 들어가기 전 액션 값에서 전달된 type의 종류에 따라 어떤 상태 값으로 스토어에 리턴될지 정합니다.

 

-> 액션 객체가 dispatch() 메소드에 전달됨

-> 액션이 전달된 dispatch(액션) 을 통해 Reducer를 호출

-> Reducer는 새로운 Store 생성 

 

 

 

 

 

참고자료 : 휴몬랩 기술블로그