[도서] 리액트를 다루는 기술 #리덕스 개념 미리 정리하기

 

 

16장. 리덕스 라이브러리 이해하기

 

- 리액트 상태 관리 라이브러리

- 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다.

- 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다.

- 전역 상태를 관리할 때 굉장히 효과적

- Context API를 통해서도 똑같은 작업을 할 수 있으나, 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있어 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋다.

- 코드의 유지 보수성을 높여주고 작업 효율도 극대화해준다.

- 편리한 개발자 도구 지원

- 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해준다.

 

16.1 개념 미리 정리하기

 

1️⃣ 액션

 

- 상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생, 하나의 객체로 표현

 

{
	type: "TOGGLE_VALUE"
}

 

 

- 액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 된다.

- 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값, 작성자 마음대로 넣을 수 있다.

 

 

{
	type: "ADD_TODO",
    data: {
    	id: 1,
        text: "리덕스 배우기"
    }
}

{
	type: "CHANGE_INPUT",
    text: "안녕하세요"
}

 

 

2️⃣ 액션 생성 함수

 

 

- 액션 생성 함수(action creator)는 액션 객체를 만들어 주는 함수

 

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

// 화살표 함수일 경우

const changeInput = text => ({
	type: "CHANGE_INPUT",
    text
})

 

 

- 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데, 매번 액션 객체를 직접 작성하기 번거로울 수 있고 만드는 과정에서 실수로 정보를 놓칠 수도 있다. 이러한 일을 방지하기 위해 이를 함수로 만들어서 관리한다.

 

 

 

3️⃣ 리듀서

 

 

- 변화를 일으키는 함수

- 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 온다.

- 두 값을 참고하여 새로운 상태를 만들어서 반환

 

 

const initialState = {
	counter: 1
};

function reducer(state = initialState, action) {
	switch (action, type) {
    	case INCREMENT :
        	return {
            	counter: state.counter + 1
            }
            default:
            	return state;
    }
}

 

 

4️⃣ 스토어

 

 

- 리덕스를 적용하기 위해 스토어(store)를 만든다.

- 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있다.

 

 

5️⃣ 디스패치

 

 

- "액션을 발생시키는 것"

- dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출한다.

 

 

 

6️⃣ 구독(subscribe)

 

- subscribe 함수 안에 리스터 함수를 파라미터로 넣어서 호출해주면, 리스터 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출된다.

 

const listener = () => {
	console.log("상태가 업데이트됨")
}

const unsubscribe = store.subscribe(listener);

unscubscribe(); // 추후 구독을 비활성화할 때 함수를 호출

 

 

 

#출처 : 리액트를 다루는 기술(저자 : 김민준 VELOPERT)