[포스코x코딩온] 웹개발자 풀스택 과정 14주차 회고 | JavaScript: [Redux]

State 종류

• Local State: 각각의 component 내에서만 관리되고 사용되는 상태다.
• Cross-Component State: 두 개 이상의 component에서 사용되는 상태, component 간 props를 통해 상태가 전달된다.
• App-Wide State: 애플리케이션 전체 영역에서 사용되는 상태, 여러 component 혹은 앱의 전체 영역에서 공유되어야 하는 데이터나 상태다.

Cross-Component와 App-Wide 상태는 Context API나 Redux가 요구된다.

---

Redux

• JavaScript 상태관리 라이브러리다.
• React를 배울 때 자주 나오는 용어지만, React에 종속되는 개념은 아니다.
• React의 상태 관리 라이브러리로 가장 많이 사용된다.

 

Redux 사용 이유

• Component 수가 많은 대형 프로젝트일 경우, 부모 component에서 특정 하위 요소에 데이터를 전달해주기위하여 둘 사이에 있는 component들을 수없이 거쳐가야 하는 상황이 발생하고, 이때 동일한 props가 수없이 사용된다. 해당 값의 형태가 조금만 바뀌어도 부모 component에서 특정 component까지 사이에 있는 모든 component들을 포함하여 props 형태 및 코드를 수정해줘야 하는 불편함이 발생한다.

 

 

• Redux를 사용할 경우, 전역으로 상태를 관리하고 모든 component들이 직접 해당 상태에 접근할수 있기에 편리하다. 각 component들은 store이라는 곳에서 상태 값은 언제든지 꺼내 쓸 수 있다.

---

Redux 용어 및 흐름

• Store (스토어)
• Action (액션)
• Reducer (리듀서)
• Dispatch (디스패치)

 

Store (스토어)

• 전역 상태가 관리되는 하나의 공간
• 현재 애플리케이션 상태와 리듀서 함수가 들어가 있다.
• 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있다.
• 스토어에 있는 데이터는 component에서 직접 접근하여 조작하지 않고, 미리 정의된 리듀서 함수를 사용하여 값을 반환받는다.

 

Action (액션)

• 상태에 어떠한 변화가 필요하면 해당 변화에 맞는 액션(action)이라는 객체를 생성할 수 있다.
• Action은 component에서 store로 운반할 데이터를 말하며 리듀서 함수가 수행할 작업과 해당 작업을 수행하기 위해 필요한 데이터를 포함할 수 있다.

 

Dispatch (디스패치)

• Action을 발생하시고 싶을 때 호출하는 함수
• Action 객체를 함수 호출 시 인수로 넘겨준다. 
  • dispatch(action)

 

Reducer (리듀서)

• Action객체의 type 속성값에 따라 변화를 일으키는 함수
• 첫 번째 매개 변수는 현재 상태값, 두 번째 매개 변수는 Action값을 받는다.
• 기존 상태에서 새로운 상태를 반환하기에, Http 요청 혹은 데이터 저장 같은 건 하면 안 된다.

---

Redux 사용

 

설치

# 설치
npm install redux

 

reducer 정의 & store 생성

import {createStore} from 'redux';

const initialState = 0;

// reducer함수 안에 switch문에 case들에 문자열이 아닌 미리 정의된 상수들을 대입시켜주면 action type 오타를 파악할 수 있다.
const ADD = 'ADD';
const MINUS = 'MINUS';

// reducer 함수 정의
const reducer = (state = initialState, action) => {
	switch (action.type) {
		case ADD:
        	return count + 1;
        case MINUS:
        	return count - 1;
        default:
        	return count;
	}
};

// store 생성
const countStore = createStore(reducer);

//생성된 store 안에는 getState(), subscribe(), dispatch() 내장 메소드가 있다.

 

getState(), subscribe(), dispatch()

// getState() : 최신 상태의 값을 반환한다

const onChange = () => {
	number.innerText = countStore.getState();
}


// subscribe() : 상태값이 변경될 때마다 콜백함수를 실행한다.

countStore.subscribe(onChange)

// dispatch() : 인수로 받은 action값을 reducer로 보내고 reducer함수를 실행시킨다.

countStore.dispatch({ type: 'ADD' });
countStore.dispatch({ type: 'MINUS' });

---

느낀 점들

프로젝트 내 모든 component들이 다른 component를 통해서 접근하지 않고 바로 전역 상태 값에 접근할수 있는게 엄청 편리한것같습니다. 다만, 프로젝트가 커질수록 오직 하나의 store로 모든 상태를 관리하기 불편할것 같다는 생각도 했습니다. 사용해야하는 상태가 여러개라면 해당 상태들을 모두 하나의 객체로 묶고, action.type에 따라 해당하는 객체의 속성값만 변경하고 새로운 객체를 다시 반환하는 방법이 있겠으나, 그럴경우 필요하지 않아도 모든 속성 값들이 함께 반환되는 문제가 생각났고 이 점을 해결할 수 있는 개념은 다음 진도에서 배우기로 했습니다.