react-redux

 

Redux.

 

Redux는 상태 업데이트와 관련된 로직을 효율적으로 관리하는 라이브러리이다. 여러 개의 컴포넌트에서 같은 상태를 공유할 때도 손쉽게 상태를 관리할 수 있다.

 

프로젝트의 규모가 커지면 서로 다른 컴포넌트를 오가게 될텐데 이 때 props와 state를 넘겨주는게 참 쉽지 않은 과정일 것이다. 이러한 과정을 좀 더 쉽게 넘겨주기 위해 외부에 Store라는 객체를 두고 이 Store안에 props와 state를 넣어줘서 관리해주는 방식이 바로 Redux이다.

 

전역 상태만 관리하고자 한다면 Context API를 사용하는 것으로 충분하지만, 프로젝트 규모가 큰 경우엔 리덕스를 사용하여 효율성과 유지 보수성을 높여주는 것이 좋습니다. 또한 리덕스는 리액트에 종속되는 라이브러리가 아니기 때문에 Angular, Vue, VanilaJS와 같은 다른 프론트엔드 라이브러리와 함께 사용이 가능합니다.

 

Redux의 3가지 기능 ( Store, action, reducer )

Redux에는 3가지의 기능을 가지고 있다.

 

첫 번째로는 상태를 따로 관리하고 있는 Store.

 

두 번째로는 Store에 운반할 데이터를 지칭하는 action

 

세 번째로는 dispatch함수를 통해서 action을 운반하는데 도움을 주는 reducer가 있다.

 

 

 

 

1. Store ( 객체 )

store는 상태가 관리되고있는 오직 하나의 공간이라고 생각해두면 된다. 컴포넌트에 있는 것이 아닌 따로 store라는 공간을 만들어서 필요한 상태값들을 이 공간에다가 넣어두면 된다.

 

그래서 특정 컴포넌트에서 상태값이 필요하고자 할 때  store 공간에서 가져오면 된다. store 객체 안에는 상태를 나타낼 수 있는 getState( ) 와 reducer를 실행하는 dispatch( ) 함수가 존재하고, reducer 함수를 실행하고 또 다른 함수를 호출 할 수 있는 기능을 가진 subscribe( ) 함수가 있다.

 

 

1.1 getState( ) 

: store에 있는 상태값을 가져올 수 있다.

1.2 dispatch( action )

: 인자값으로 action을 전달해서 reducer 함수를 실행시킨다.

1.3 subscribe( listener )

: 인자값으로 listener 함수를 전달하면 reducer 함수 실행 이후 listener로 등록된 함수가 실행된다. 

 

 

 

 

2. action ( 객체 )

action은 store에 운발할 데이터라고 지칭한다. 즉 action을 사용해서 store에 데이터를 보낸다라고 생각하자.

dispatch 함수의 인자값으로 action을 넣어서 보내면 reducer 함수가 실행이 되면서 reducer함수의 인자값으로 action을 전달을 받게 된다. 

 

ex) dispatch(action) -> const reducer = (state,action) => { }

 

 

 

 

3. reducer ( ) 

dispatch( ) 함수에 인자값으로 action을 넣어서 reducer 함수에 전달을 한다. reduer함수는 인자값으로 전달받은 action을 보고 상태를 어떤 식으로 변경할지 선택을 한다. reducer의 매개변수로는 state, action이 있다.

 

 

 

 

자 이제 Redux를 사용하기 위해 npm 에서 설치를 진행해보자

npm install redux
npm install react-redux

 

 

 

Redux를 이용한 코드 예제를 보도록 하자.

const redux = require('redux')
const {createStore} = redux

const initialState = {
    name:'ingoo',
    coffee:0
}

const reducer = (state=initialState,action) => {
   return state
}

const store = createStore(reducer)

console.log(store.getState())

// { name: 'ingoo', coffee: 0 }

 

자 일단 라이브러리를 통해서 redux를 가져오고, redux에 속해있는 createStore를 가져오도록 하자.

 

먼저 전역상태를 관리해주기 위한 store를 만들기 위해 createStore( )를 사용해서 인자값으로 reducer를 넣었다. 인자값으로 들어간 reducer는 위에 있는 함수를 나타내고 있다. 

 

store.getState() 를 실행시킴으로써 createStore에 인자값에 있는 reducer 함수가 실행이 되고 reducer 함수의 매개변수가 가지고 있는 state=initialState를 통해서 initialState 객체가 가지고 있는 기본 값이 return으로 반환될 것이다.

 

store.getState()의 콘솔 값  => { name: 'ingoo', coffee: 0 }

 

 

 

자 그러면 이제 dispatch( ) 를 이용해서 상태값을 변경해보도록 해보자.

const redux = require('redux')
const {createStore} = redux

const initialState = {
    name:'ingoo',
    coffee:0
}

const CHANGENAME = "CHANGE_NAME"
const change_name = (payload) => ({type:CHANGENAME,payload})

const reducer = (state=initialState,action) => {
   switch(action.type){
       case CHANGENAME:
           return{
                ...state,
                name:action.payload
           }
        default:
            return state
   }

}

const store = createStore(reducer)

store.dispatch(change_name('juchan'))
console.log(store.getState())

자 store.dispatch( )를 통해서 상태의 값을 변경을 했다. 그 순서에 대해 찬찬히 살펴보도록 하자.

 

store 객체 안에 dispatch( ) 가 있으니 우리는 store.dispatch( ) 이런식으로 코드를 썼다. dispatch 인자값에는 아까 설명했듯이 action이 들어간다. 그래서 우리는 이 인자값을 함수로 따로 빼서 만들었다

 

--> const chage_name = (payload) => ({type:CHANGENAME,payload})

 

그래서 우리는 chage_name의 인자값 안에다가 보내주고자 하는 값을 넣으면 action을 통해서 reducer에 보내줄 수 있다.

reducer함수는 인자값으로 받은 action이라는 객체 안에 type, payload값을 가져와서 switch 문을 통해서 각각 조건에 해당하는 값을 찾고 그 조건이 해당했을 때 return 값으로 반환을 하도록 설정을 했다.

 

return 값에는 state의 기본값을 스프레드 연산자를 통해서 깊은복사로 가져오고 state 안에 있는 내용을 추가하거나 수정하고자 할 때 state 객체의 속성을 가져오고 속성에 대한 값을 action에서 보낸 payload 값을 줬다.

그러면 결과값을 getState( ) 로 콘솔을 찍어서 확인해보면 -> { name: 'juchan', coffee: 0 } 이렇게 뜨는 것을 확인할 수 있다.

 

 

 

 

이런식으로 Redux를 통해서 store라는 전역상태를 만들고 전역상태의 값을 바꾸기 위해 dispatch( ) 를 이용함으로써 내용이 변하는 것을 확인했다.