Redux, Context API란?

redux란?

 

리덕스는 상태의 중앙 관리를 위한 상태관리도구이다. react, angular, vue에서도 사용할 수 있다.

리덕스는 '전역 상태'를 생성하고 고나리하기 위한 라이브러리라고 할 수 있다.

 

리덕스는 크게 

- 저장소: 전역상태를 보관

- 리듀서: 상태 저장소에 접근을 위함.

- 액션: 리듀서에 행동을 명령

- 서브스크립션: 저장소에 보관된 상태를 가져옴

 

으로 나누어져 있다.

 

저장소(store)

: 전역상태를 저장한다. javascript 객체 형태로 저장되어 있으며, reducer를 통하지 않고 접근할 수 없다.

1개의 application에 1개의 store만이 존재할 수 있으며, react에는 index.js에 정의하는 편이다.

 

리듀서(reducer)

: store에 유일하게 접근할 수 있는 객체로서, 1개의 저장소에 1개만 존재한다.

들어오는 action따라서 행동하며, 리듀서 함수 내에 반환되는 값이 store에 저장된다.

이때, 상태가 추가되는것이 아니라, 덮어씌워지게 되므로, 전체 상태를 복사하여 상태를 갱신하고 반환해야한다.

ex) store에 {account: "1", name:"kim"}이 있을때 reducer내의 함수가 {name:"choi"}를 반환하면

저장소에는 {name: "choi"}만이 존재한다.

 

액션(action)

: 액션은 reducer에게 보내는 store에 대한 행동을 정의한다.

reducer는 이 action에 따라 store에 access하여 정해진 동작을 한다.

 

서브스크립션(subscription)

: subscription은 store에 저장된 전역상태를 가져온다.

따라서 어느 component에서도 store에서 상태값을 얻을 수 있다.

 

 

Context API

: ContextAPIsms redux와 마찬가지로 상태의 중앙 관리를 위한 상태 관리 도구이다.

redux와 다르게 react에서만 사용할 수 있다.

redux와 다르게 여러 저장소가 존재할 수 있다.

 

Context API는

전역상태가 저장되는 context,

전역상태를 제공하는 Provider,

전역상태를 받아 사용하는 Consumer 

로 구성된다.

 

- Context

context는 컴포넌트가  제공한한 상태가 저장된다.

Consumer는 이 context를 통해서 상태에 접근이 가능하다.

context는 여러개 존재할 수 있다.

context 내부에는 Provider와 Consumer가 정의도어 있다.

 

- Provider

context에 상태를 제공하여 다른 컴포넌트가 해당 상태에 접근하여 사용할 수 있게 해준다.

 

- Consumer

consumer는 제공된 상태에 접근하는 방법 중 하나이다.

context는 consumer 사이에 있는 처음의 객체를 context에 인자로 전달하기 때문에 빈 객체를 작성한 후에 JSX를 작성해야 한다.

 

 

 

 

Redux와 Context API의 차이는?

 

둘다 전역 상태 관리를 위한 도구이다.

그리고 Redux또한 Context API를 기반으로 하여 만들어져 있다.

 

하지만 Redux는 Context API의 전역 상태 관리 외에 다양한 기능을 제공한다.

- 로컬 스토리지에 상태를 영속적으로 저장하고 시작할 때 다시 불러오는 데 뛰어나다.

- 상태를 서버에서 미리 채워서 html에 담아 client로 보내고 앱을 시작할때 다시 불러오는데 뛰어나다.

- 사용자의 액션을 직렬화해서 상태와 함꼐 자동으로 버그 리포트에 첨부할 수 있다. 이것으로 개발자들은 에러를 재현할 수 있다.

- 액션 객체를 네트워크를 통해 보내면 코드를 크게 바꾸지 않고도 협업환경을 구현할 수 있다.

- 실행취소 내역의 관리나 낙관적인 변경을 코드를 크게 바꾸지 않고도 구현할 수 있다.

- 개발할 때 상태 내역 사이를 오가고 액션 내역에서 현재 상태를 다시 계산하는 일을 TDD 스타일로 할 수 있다.

- 개발자 도구에게 완전한 조사와 제어를 가능하게 해서 개발자들이 자신의 앱을 위한 도구를 직접 만들 수 있게 해준다.

- 비즈니스 로직 대부분을 재사용하면서 UI를 변경할 수 있게 해준다.