React- Redux 2

리덕스를 쓰는 이유는 크게 두 가지입니다. 첫째는 props를 사용하지 않고 데이터를 전송하기 위함입니다. 둘째는 오늘 공부해 볼 내용인 상태관리에 유용하기 때문입니다. 리덕스에서 상태관리를 하는 법에 대해서 공부해보겠습니다.

 

리덕스에서 데이터를 수정할 때는 useState를 사용했을 때 자동으로 생성되는 state 변경함수를 사용하지 않습니다. 리덕스를 통해 데이터를 수정하는 방법은 두 단계로 나뉘어져 있습니다.

 

1. index.js 에 reducer 함수를 만들어 줍니다.
2. 원하는 곳에서 dispatch 함수를 통해 reducer 함수에서 미리 정의한 데이터 수정방법을 불러옵니다.

 

1️⃣ reducer 함수 만들기

 

reducer함수는 index.js에 생성합니다. reducer 안에는 stated의 초기값과 state를 수정하는 방법이 잔뜩 들어있습니다.

 

let defaultState = [
    {id:0, name: '멋진 신발', quan: 2},
    {id:1, name: '간지 신발', quan: 4}
]

function reducer(state = defaultState, action) {
  return state
}

let store = createStore(reducer);

 

이렇게 만들어주면 reducer 기본 세팅이 된 것입니다. 파라미터 자리에 등호가 들어간 것은 default parameter 문법이 사용된 것입니다. state에 별도로 state가 선언되지 않는다면 위에서 선언한 기본 state를 넣겠다는 뜻입니다.

 

reducer 함수를 이렇게 만들어 놓으면 이제 기능개발을 할 수 있습니다. 예를 들어 버튼을 누르면 defaultState의 quan이 증가하는 기능을 개발해보겠습니다.

 

function reducer(state = defaultState, action) {

    if (action.type === '증가') {

        let copy = [...state];
        copy[0].quan++;
        return copy;
        
    } else {
        return state;
    }
 
 }

 

reducer 함수에서 어떤 기능을 개발할 때는 조건문을 활용해줄 수 있습니다. if의 조건에 reducer 함수의 두번째 파라미터인 action을 활용하여 action.type을 적어줍니다. action.type 이 부분은 꼭 이렇게 써줘야 합니다. 이것이 나중에 dispatch함수와 관련되어서 다시 등장합니다.

 

위 코드를 해석하자면 state라는 데이터를 복사한 후에 그것을 조작한 것입니다. 이 때 state는 defaultState가 되겠군요. 

 

 

 

3️⃣  reducer 함수 사용하는 방법

 

reducer 함수를 이용해서 데이터를 수정하는 방법에 대해서 알아보겠습니다. 

 

<button onClick={()=>{ props.dispatch({type: '증가'}) }}> + </button>

 

+ 버튼을 누르면 작동하는 기능을 만들고자 합니다. 그럼 당연히 onClick 이벤트를 줘야할 것이고 이제 그것에 대한 콜백함수로 위의 코드처럼 적어주면 됩니다. dispatch 함수를 사용해주면 됩니다. dispatch 함수는 object 자료형을 가지는데 그 안에 type: ' ' 이 형식을 잘 지켜서 작성하면 됩니다.  type에는 reducer 함수를 만들 때 action.type에 넣어줬던 값이랑 동일한 값을 넣어줘야 합니다.