[React] #5. redux 간단하게 써보자.

redux 한줄요약

부모 컴포넌트에서 선언된 상태를 직접 변경하지 않고 상태별 변경 로직을 만들어 관리가 가능하게 하는 라이브러리 이다.

redux 설치

1. 일단 redux, react-redux 설치부터 하자.

> npm install redux react-redux

2. 설치가 끝나면 import

import { Provider}  from 'react-redux';
import { createStore, combineReducers}  from 'redux';

사용할 변수 선언 및 리듀서 선언

1. 변수를 한개 선언한다.

let value = 100;

2. 변수를 수정할 함수를 만든다.(리듀서)

function reducer(initValue = value, action) {

    if(action.type == "add"){
       
       // 100 + 1 = 101
       let newValue = initValue + {action.addValue};
       
       return newValue;
		
    } else {
      return initValue;
    }

}

3. 만든 함수를 createStore 한다.

// combineReducers  를 이용하면 여러개 가능.
let states = createStore( {reduce} );

프로바이더 설정

1. redux 를 이용하여 변수 범위를 지정한다. store 속성은 정해져 있는 것이므로 변경하면 에러난다.

<Provider store={states}>
<App />
</Provider>

상태값을 받을 컨텍스트 설정

1. 하위 컨텍스트에서 부모 컨텍스트로부터 상태값 받기 ( useSelector() )

let state = useSelector( ( state ) => { return state.reducer } );

2. 상태값 수정을 위한 선언 (useDispatch())

let dispatch = useDispatch();
...

{/* 사용법 */}
dispatch({type:"add", addValue:1})

combineReducers 설정

1. createStore 를 할떄에 여러 개의 상태를 변경하고 싶은 경우 사용된다. 객체의 형태로 묶어서 사용하면 된다.

function reducer1(state = State1, action) {
    if(action.type == "add1") {
        ...
    } else if(action.type == "add2") {
        ...
    } else if(action.type == "add3") {
        ...
    }
}

function reducer2(state = State1, action) {
    if(action.type == "add11") {
        ...
    } else if(action.type == "add12") {
        ...
    } else if(action.type == "add13") {
        ...
    }
}


let states = createStore( combineReducers( {reducer1, reducer2} ) );

2. 하위 컨텍스트에서 받는 방식에는 변화가 없다.

let state = useSelector( ( state ) => { return state } );

3. 상태값 수정을 위한 선언 (useDispatch())

let dispatch = useDispatch();
...

{/* 사용법 */}
dispatch({type:"add1", addValue:1})
dispatch({type:"add11", addValue:1})

이쯤되면 이게 뭔 개소리인지 대충 짐작이 갈 것이다. combineReducers 는 선언된 리듀서를 하나로 합친다는 의미이고 여기서의 useDispatch는 두개의 리듀서에 모두 접근이 가능한데 어떤 state에 접근할 것인지는 action 에 실어서 보내면 되는 것이다. 이걸로 미루어 보면 state, reducer, action 의 선언이 매우 체계적이어야 한다는 것을 알 수 있다. 처음에 useDispatch 를 본 소감은 "대체 어떤 리듀서를 참조하는지 모르겠다" 였는데 차근차근 죽 뜯어보니 대충 이해가 되더라... 하...

props와 Context API, redux를 모두 찍먹해봄

각자 사용해야할 범위와 조건이 있다. 필자가 생각해본 사용 용도는 다음과 같다.

1. 전역을 범위로 해야 하고 수시로 여러 화면에서 변경되는 경우는 redux
2. 사용해야 할 위치가 명확하고 1뎁스 정도만 이동하는 경우에는 props
3. 사용해야 할 위치가 정해져 있긴 하고 다른곳에서 사용이 드물거나 안하는 경우는 Context API

마치며

다음 포스팅에서는 라우팅을 다뤄 보도록 하겠다.