리액트 리덕스란? (React Redux)

리액트 리덕스란?

- 상태관리 라이브러리

- 전역 상태 관리를 도와주는 라이브러리

 

리액트 리덕스 설치

yarn add redux react-redux

 

리덕스 공식 홈페이지

Redux 시작하기 | Redux

 

리덕스의 개념과 용어

리덕스

데이터를 한 곳에 넣고, 여기저기에서 꺼내볼 수 있게 해주는 것.

리액트와 별도로 사용할 수 있다.

상태관리를 위해 다른 프론트엔드 프레임워크/라이브러리와 함께 쓸 수 있다.

 

State

- 리덕스에서는 저장하고 있는 상태값("데이터"라고 생각하셔도 돼요!)를 state라고 불러요.

- 딕셔너리 형태({[key]: value})형태로 보관합니다.

 

Action

- 상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할 때) 발생하는 것입니다.

- 사용자가 좋아요를 누름 > 변경이 필요하기 때문에 Action 발생.

- 액션은 객체로 이루어짐

- type은 객체의 이름. 사용자가 정하는 임의의 문자열을 넣는다.

{type: 'CHANGE_STATE', data: {...}}

 

ActionCreator

액션 생성 함수라고도 부릅니다.

액션을 만들기 위해 사용합니다.

//이름 그대로 함수예요!
const changeState = (new_data) => {
// 액션을 리턴합니다! (액션 생성 함수니까요. 제가 너무 당연한 이야기를 했나요? :))
	return {
		type: 'CHANGE_STATE',
		data: new_data
	}
}

 

Reducer

- 실제로 데이터를 변경해주는 것.

- 리덕스에 저장된 상태(=데이터)를 변경하는 함수입니다.

- 사용자가 액션 생성 함수를 부름 → 액션을 생성

   → 리듀서가 현재 상태(=데이터)와 액션 객체를 받음 → 새로운 데이터를 만들고 → 리턴

// 기본 상태값을 임의로 정해줬어요.
const initialState = {
	name: 'mean0'
}

function reducer(state = initialState, action) {
	switch(action.type){

		// action의 타입마다 케이스문을 걸어주면, 
		// 액션에 따라서 새로운 값을 돌려줍니다!
		case CHANGE_STATE: 
			return {name: 'mean1'};

		default: 
			return false;
	}	
}

 

Store

우리 프로젝트에 리덕스를 적용하기 위해 만드는 것.

스토어에는 리듀서, 현재 애플리케이션 상태, 리덕스에서 값을 가져오고 액션을 호출하기 위한 몇 가지 내장 함수가 포함되어 있다.

 

dispatch

디스패치는 우리가 앞으로 정말 많이 쓸 스토어의 내장 함수

액션을 발생 시키는 역할을 함.

 

 

리덕스의 3가지 특징

 

단일 스토어 규칙

- 한 프로젝트에 스토어는 하나만 사용

 

store의 state(데이터)는 오직 action으로만 변경할 수 있다.

- 리액트에서도 state는 setState()나, useState() 훅을 써서만 변경 가능했다.

- 이와 마찬가지로 리덕스에 저장된 데이터 = 상태 = state는 읽기 전용입니다.

- 액션으로 변경을 일으키는 원리 : 가지고 있던 값을 수정하지 않고, 새로운 값을 만들어서 상태를 바꾼다.

   ->A에 +1을 할 때, A = A+1이 되는 게 아니고, A' = A+1이라고 새로운 값을 만들고 A를 A'로 바꾼다.

- 데이터가 마구잡이로 변하지 않도록 불변성을 유지해주기 위함

 

어떤 요청이 와도 리듀서는 같은 동작을 해야한다!

- 리듀서는 순수한 함수여야 한다는 뜻

- 리듀서는 이전 상태와 액션을 파라미터로 받는다.

 

순수한 함수란?

- 파라미터 외의 값에 의존하지 않아야한다.

- 이전 상태는 수정하지(=건드리지) 않는다. (변화를 준 새로운 객체를 return 해야한다.)

- 파라미터가 같으면, 항상 같은 값을 반환