[Redux] 리덕스 키워드, 규칙

상태관리 라이브러리 redux

리덕스를 사용하게 될 경우의 장점 : 상태 관련 로직을 다른 파일들로 분리시켜서 더욱 효율적으로 관리가 가능.

 

프로젝트의 규모가 크다 , 비동기 작업을 자주 하게 된다, 사용하기 편하다 >> 리덕스 사용을 권장합니다.

 

리덕스에서 사용되는 키워드

 

1. 액션(Action)

상태에 어떤 변화가 필요하게 될 때, 액션을 발생시킵니다.

액션은 객체로 표현되며, 다음과 같은 형식으로 되어 있습니다.

{
	type: "TOGGLE_VALUE"
}

type의 경우는 필수적으로 가지고 있어야 하고, 그 외의 값들은 개발자의 마음대로 넣을 수 있습니다.

 

2. 액션 생성함수(Action Creator)

액션 생성함수는 말 그래도 액션을 생성합니다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어줍니다.

export function addTodo(data){
	return{
    	type: "ADD_TODO",
        data
    }
}

export function addTodo = data => ({
	type: "ADD_TODO",
        data
})

액션 생성함수를 만들어서 사용하는 이유는 컴포넌트에서 쉽게 액션을 발생시키기 위함입니다.

그래서 함수 앞에 export 키워드를 붙여 다른 파일에서 불러 사용합니다.

 

3. 리듀서(Reducer)

리듀서는 변화를 일으키는 함수입니다.

function reducer(state, action){
	return alteredState;
}

(alteredState : 상태 업데이트 로직)

리듀서는, 현재의 상태와, 전달받은 액션을 참고하여 새로운 상태를 만들어서 반환합니다.

이 리듀서는 useReducer를 사용할 때 작성하는 리듀서와 똑같은 형태를 가지고 있습니다.

 

카운터를 사용할 리듀서를 작성한다면 다음과 같이 작성할 수 있습니다.

function counter(state, action){
	switch(action.type){
    	case 'INCREASE' :
        	return state + 1;
        case 'DECREASE' :
        	return state - 1;
        default :
        	return state;
    }
}

useReducer 에서는 일반적으로 default: 부분에 에러를 발생시키도록 처리하는게 일반적입니다.

그러나 리덕스의 리듀서에서는 기존 state를 그대로 반환하도록 작성해야 합니다.

 

리덕스를 사용 할 때에는 여러개의 리듀서를 만들고 이를 합쳐서 루트 리듀서 (Root Reducer)를 만들 수 있습니다.

(루트 리듀서 안의 작은 리듀서는 서브 리듀서라고 부름)

 

4. 스토어(Store)

리덕스에서는 한 애플리케이션 당 하나의 스토어를 만들게 됩니다.

스토어 안에는, 현재의 앱 상태와 리듀서가 들어가 있고, 추가적으로 몇가지 내장 함수들이 있습니다.

 

4-1. 디스패치(dispatch)

디스패치는 스토어의 내장함수 중 하나입니다. 디스패치는 액션을 발생시키는 것 이라고 이해하면 됩니다.

dispatch라는 함수에 액션을 파라미터로 전달합니다. ex) dispatch(action)

위와 같이 호출을 하면, 스토어는 리듀서 함수를 발생시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어줍니다.

 

4-2. 구독(subscribe)

구독 또한 스토어의 내장함수 중 하나입니다. subscribe 함수는, 함수 형태의 값을 파라미터로 받아옵니다.

subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출됩니다.

 

리액트에서 리덕스를 사용하게 될 때 보통 이 함수를 직접 사용할 일은 없습니다.

대신에 react-redux라는 라이브러리에서 제공하는 connect, useSelector Hook을 사용하여 리덕스 스토어 상태에 구독합니다.

 

 

리덕스의 3가지 규칙

 

1. 하나의 애플리케이션 안에는 하나의 스토어가 있습니다.

여러개의 스토어를 사용하는 것은 사실 가능하지만, 권장하지는 않습니다.

특정 업데이트가 너무 빈번하게 일어나거나, 애플리케이션의 특정 부분을 완전히 불리시키게 될 때 여러개의 스토어를 만들 수 있습니다.

그럴 경우에는 개발도구를 사용하지 못하게 됩니다.

 

2. 상태는 읽기전용 입니다.

리액트에서 state를 업데이트 해야 할 때, setState를 사용하고, 배열을 업데이트 해야 할 때는 배열 자체에 push를 직접 하지 않고, concat과 같은 함수를 사용하여 기존의 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 합니다.

엄청 깊은 구조로 되어 있는 객체를 업데이트 할 때도 마찬가지로, 기존의 객체는 건드리지 않고 Object.assign을 사용하거나 spread 연산자(...)를 사용하여 업데이트 합니다.

 

리덕스도 마찬가지 입니다. 기존의 상태는 건드리지 않고 새로운 상태를 생성하여 업데이트 해주는 방식으로 해주면, 나중에 개발자 도구를 통해서 뒤로 돌릴 수도 있고 다시 앞으로 돌릴 수도 있습니다.

 

리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경 되는 것을 감지하기 위하여 shallow equality 검사를 하기 때문입니다.

이를 통하여 객체의 변화를 감지 할 때 객체의 깊숙한 안쪽까지 비교를 하는 것이 아니라 겉핥기 식으로 비굘르 하여 좋은 성능을 유지할 수 있습니다.

 

3. 변화를 일으키는 함수, 리듀서는 순수한 함수여야 합니다.

리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받습니다.

이전의 상태는 절대로 건드리지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환합니다.

똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야만 합니다.

---

참고:

https://react.vlpt.us/redux/01-keywords.html

1. 리덕스에서 사용되는 키워드 숙지하기 · GitBook