Redux

리덕스

리덕스는 상태(State)를 관리 라이브러리이다.

 

상태(State) 란?

컴포넌트 내 mutable 데이터 저장소이다.

mutable하다는 의미는 상태값을 변경할 수 있다는 것이고 뷰(render)에서 상태를 이용하고, 상태가 변경되면 뷰가 리랜더링(Rerendering)되는 성격을 가지고 있다.

화면에서 사용자의 Input값을 감지하는 상황을 예를 들어보자

위의 사진은 useState hook을 이용하여 입력받을 데이터데 대한 초기화를 해놓은 형태이다.

이 사진은 input박스의 데이터 변화를 감지하여 state에 데이터를 변경해주는 코드이다.

이런 형태로 state를 관리할 수 있다.

 

이러한 데이터들을 하위컴포넌트 또는 상위컴포넌트로 전달할 경우, 컴포넌트 트리가 깊어지면 상태관리가 복잡해질 수 있다. (아래 사진 참조)

Redux는 이러한 문제를 해결하기위해 컴포넌트 외부에서 상태를 관리해주는 라이브러리이다.

상태관리를 해주는 라이브러리가 없으면 이런형태로 Data flow가 복잡해진다.

 

 

Redux를 사용하여 데이터를 한곳에서 관리 하여 Data flow 단순화

 

리덕스에서의 Data Flow는 다음과 같다.

1. React Component에서 변화가 일어난다.

2. action생성함수(Action Creatros)에서 action을 객체형태로 만들어 reducer로 반환한다.

3. reducer는 변화를 일으키는 함수이다. 이전상태와 action을 받아와 새로운 상태를 반환한다.

4. 변화한 데이터는 Store를 통해 React에 새로운 state를 subscribe 한다.

 

Redux의 규칙

1. 하나의 Application에는 하나의 Store만 생성.

2. read only이다. (immutable)

 - spread연산자 사용하여 객체를 복사하여 덮어쓰기 해야 함.

 - array에서 push, supply, reverse사용하면 안됨, concat, filter, map, slice와 같은 불변성을 지키는 내장함수 사용

3. Reducer는 순수함수

 - 이전 상태를 변경하지 않고 새로운 상태 객체를 만들어서 반환한다.

 - 동일한 parameter로 호출된 reducer는 항상 같은 결과를 반환하여야 한다. (input에 대한 output은 항상 같아야 함.)

 

 

 

주요 키워드

1. Action

 - 상태에 변화가 필요할 때 action을 발생시킨다.

 - action에는 type이 필수적으로 필요하다.

 - Action 생성함수 : parameter를 받아와서, action객체를 만들어 주는 함수

 

2. Reducer

 - 변화를 일으키는 함수

 - state와 action 2가지 parameter를 받아온다.

 - action.type을 가지고 action에 따라 state를 업데이트 한다.

 - 불변성을 유지하여야 한다.(기존 객체, 배열을 건드리지 않고 새로운 객체, 배열 반환)

 - action.type 중 default는 기본상태를 반환한다.

 

3. Store

 - 현재 state, reducer와 내장함수(dispatch, subscribe 등)가 포함되어있음.

 - subscribe를 호출할때 parameter로 특정함수를 넣어주면, action이 dispatch될 때 마다 해당 함수를 실행, store가 업데이트 될때마다 함수를 실행할 수 있음.