redux

김승훈·2021년 6월 27일

redux

React

목록 보기

12/14

Redux

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.
상태를 효율적으로 관리할 수 있게 도와주는 도구

Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다.

Redux를 사용하기 적절한 때

계속해서 바뀌는 상당한 양의 데이터가 있다
상태를 위한 단 하나의 근원이 필요하다
최상위 컴포넌트가 모든 상태를 가지고 있는 것은 더 이상 적절하지 않다

리덕스 개념

Action

상태의 변화가 필요할 때, 우리는 액션을 발생시킵니다. 이 액션은 하나의 객체로 표현됩니다. 가령, 할일 목록을 추가를 한다든지, 삭제를 한다면 추가, 삭제에 관한 액션의 타입 정의가 있어야 합니다.


{
  type: "ADD_TODO"
}

const ADD_TODO = "ADD_TODO"

Action Creator -액션함수

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

이러한 액션 생성함수를 만들어서 사용하는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함입니다. 그래서 보통 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용합니다.

리덕스를 사용 할 때 액션 생성함수를 사용하는것이 필수적이진 않습니다. 액션을 발생 시킬 때마다 직접 액션 객체를 작성할수도 있습니다.

Reducer - 리듀서

리듀서는 변화를 일으키는 함수입니다. 리듀서는 두가지의 파라미터를 받아옵니다.

function reducer(state, action) {
  // 상태 업데이트 로직
  return alteredState;
}

리듀서는, 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환합니다. 이 리듀서는 useReducer 를 사용할때 작성하는 리듀서와 똑같은 형태를 가지고 있습니다.

만약 투두 앱을 위한 리듀서를 작성한다면 다음과 같이 작성할 수 있습니다.

function counter(state, action) {
  switch (action.type) {
		case ADD_TODO :
	    return{
	        ...state,
	        todos:[action.data, ...state.todos]
	      };
    default:
      return state;
  }
}

스토어 (Store)

리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 됩니다. 스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있습니다.

디스패치 (dispatch)

디스패치는 스토어의 내장함수 중 하나입니다. 디스패치는 액션을 발생 시키는 것 이라고 이해하시면 됩니다. dispatch 라는 함수에는 액션을 파라미터로 전달합니다.. dispatch(action) 이런식으로 말이죠.

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

구독 또한 스토어의 내장함수 중 하나입니다. subscribe 함수는, 함수 형태의 값을 파라미터로 받아옵니다. subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출됩니다.

리액트에서 리덕스를 사용하게 될 때 보통 이 함수를 직접 사용하는 일은 별로 없습니다. 그 대신에 react-redux 라는 라이브러리에서 제공하는 connect 함수 또는 useSelector Hook 을 사용하여 리덕스 스토어의 상태에 구독합니다.

출처 :

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

✔ 정리

추가, 삭제와 같은 각각의 액션타입을 정의합니다. 액션 함수는 각각의 액션 타입과 파라미터를 입력받아 액션을 객체 형태로 반환해줍니다. 상태의 변화가 필요해진다면, 디스패치가 액션을 발생시켜 스토어에게 알립니다. 스토어로 전달된 액션은 스토어의 리듀서 함수를 호출시키고, 호출된 리듀서 함수는 이전 상태와 액션타입을 파라미터로 전달받아 정의된 로직대로 현재 상태값을 변화시켜 변화된 상태를 반환합니다. 반환된 상태는 스토어에 저장됩니다.

리덕스의 3가지 규칙

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

하나의 애플리케이션에서 단 한개의 스토어를 만들어서 사용 !!

특정 업데이트가 너무 빈번하게 일어나거나, 특정 부분을 분리시키게 될 때 여러개의 스토어를 만들 수도 있지만, 그렇게하면 개발도구를 사용하지 못하게됩니다.

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

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

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

shallow equality 이란 ?

얕은 동등성(shallow equality)

참조점이 같음. 또는 두 참조점이 같은 객체를 가리키는 것.

깊은 동등성(deep equality)

값이 같음. 또는 두 참조점이 같은 값을 가지는 객체들을 가리키는 것.

얕은 복사(shallow copy)

내장된 객체를 가리키는 모든 참조점을 포함하여 객체의 내용을 복사하는 것; copy 모듈에 있는 copy 함수로 구현한다.

깊은 복사(deep copy)

객체의 내용뿐만 아니라 내장된 모든 객체, 그리고 그 내장된 객체안에 내장된 모든 객체, 등등을 복사하는 것; copy 모듈안에 있는 deepcopy 함수로 구현한다.