Redux의 키워드 / 규칙 정리

프로젝트를 하면서 상태 관리 라이브러리인 Redux를 사용하게 되었다.

생소한 개념이라 Redux에 대한 키워드들과 규칙에 대해서 한번 정리해보려고 한다.

 

상태 관리와 상태관리 라이브러리

우선 '상태'는 컴포넌트 내부에 보이는 데이터뿐 아니라 웹 기능에 포함되는 모든 데이터를 말하며, '상태'를 관리하는 것을 '상태 관리'라고 한다.

그리고 이 상태 관리와 관련된 자원을 모아놓은 것이 '상태 관리 라이브러리'가 되겠다.

 

Redux

리덕스는 리액트 생태계에서 가장 많이 사용되는 상태관리 라이브러리 중 하나다.

 

리덕스를 사용함으로써 우리는 두 가지 부분에서 장점을 가질 수 있다.

첫 번째는 컴포넌트 간 데이터를 전달하는 것이 편리하다.

상태 관리 없이 컴포넌트 간 데이터를 전달하는 방법으로 우리는 props를 사용한다.

하지만 컴포넌트 중첩이 많이 존재할 수 록 우리는 계속 props를 전달해줘야 하는 번거로움이 있다.

redux가 전역에서 state를 관리함으로써 이러한 번거로움을 해소할 수 있다.

두 번째는 상태 변경을 관리하기 쉽다.

state를 전역으로 관리하게 되면서 state를 변경하는 장소를 store로 한정시킬 수 있다.

state를 사용하는 컴포넌트에서 개별적으로 state를 조작하면 이후 state 변경이 어디서 발생했는지 컴포넌트를 들여다봐야 한다.

하지만 redux를 사용하면 store에서 모든 상태 변경을 관리하기 때문에 상태 변경 추적이 용이해진다.

 

Redux 주요 키워드

1. 액션(Action)
상태를 변화하기 위해서 액션을 사용해야 한다. 액션은 하나의 객체로 정의할 수 있고, 객체 내에는 type과 그 외에 필요한 값을 넣을 수 있다. (type은 필수, 그 외는 자유)

{
	type: 'ADD_LIKE', // 필수
   	text: 'Like!',
}

액션 객체를 생성하는 액션 생성 함수를 만들어 사용하기도 한다.

export function addLike(data) {
  return {
    type: "ADD_LIKE",
    data
  };
}

export const addLike = text => ({ 
  type: "ADD_LIKE",
  text
});

 

2. 리듀서 (Reducer)

리듀서는 state를 직접 변화시키는 함수. 현재 state와 액션 객체를 인자로 받아 새로운 상태를 반환한다.

function reducer(state, action) {
	switch (action.type) {
    	case "ADD_LIKE":
        	return state + 1;
    	case "UNDO_LIKE":
        	return state - 1;
        default :
        	return state;
    }
}

switch 구문을 활용하여 액션의 type에 따라 원하는 state 조작을 하도록 한다.

default 부분에는 액션 함수가 존재하지 않는 경우기 때문에 에러 메시지를 통한 예외처리를 해주는 것도 하나의 방법.

 

3. 스토어 (Store)

리덕스는 하나의 애플리케이션당 하나의 스토어를 가질 수 있다. 앞서 정리한 액션, 리듀서, state를 포함하고, 그 외에 다른 함수들을 선언하여 사용할 수 있다.

 

4. 디스패치 (Dispatch)

디스패치는 스토어에 존재하는 내장 함수이다. 액션을 객체를 넘겨받아서 리듀서를 동작시키는 역할을 한다.

dispatch({ type: 'ADD_LIKE' })

5. 구독 (Subscribe)

구독은 스토어에 존재하는 내장 함수이다. 콜백 함수를 인자로 사용할 수 있고, 액션이 디스 패치될 때마다 콜백 함수가 호출된다.

 

직접 사용하는 경우는 잘 없고, 주로 useSelect hook을 활용해서 구독 기능을 사용한다고 한다.

 

Redux 사용의 3가지 원칙

1. 하나의 애플리케이션에는 하나의 스토어만 사용한다.

하나의 스토어만 활용하도록 하여 디버깅이 쉬워지고 서버와 직렬 화하여 클라이언트에서 데이터를 쉽게 받아들여올 수 있는 장점이 있다.

2. state를 직접 변경시키지 않는다. (Read-Only)

액션을 통해서만 state를 조작할 수 있도록 한다. 이를 통해서 상태변화의 의도를 정확하게 표현할 수 있고, 상태 변화를 추적하기 용이하다.

3. 순수 함수를 통해서만 조작되어야 한다.

순수 함수란 동일한 input에 대해서 동일한 output을 return 하는 함수를 말한다.

state를 변환하는 reducer를 순수 함수로 정의하여 파라미터로 전달받은 aciton, state 외에 다른 값에 의해서 state가 조작되지 않도록 해야 한다.

 

지금까지 Redux 상태 관리 라이브러리에 대해서 주요 키워드와 원칙들에 대해서 정리해보았습니다.

 

내용에 이상한 내용이나 수정해야 할 부분이 있으면 알려주세요...!

 

# Reference

6장. 리덕스 · GitBook

 

Redux 정리