[React] 리덕스란? (리덕스의 기본개념)

리덕스는 리액트에서 상태관리를 위해서 필요한 친구다. 왜 리덕스라는 친구가 필요해졌을까? 리액트에서 상태(데이터)를 관리하기 위해서는 부모를 건드리지 않을 수 없다. 그래서 계속해서 현재 데이터의 부모가 어디있는지 찾아야하고 그것을 건드려야하는 불편함이 있는 것이다. 이런 불편함을 해소하기 위해서 데이터를 전역에서 사용할 수 있게 만들어주는 것이 리덕스이다. 조금 더 쉽게 말하면, 리덕스는 데이터를 한 군데에 몰아넣고, 여기저기에서 꺼내볼 수 있게 해주는 친구이다.

 

리덕스에서 아주 기본이 되는 용어들이 있다. 그 용어들에 대해서 정리해보고자 한다. 

---

State : 리덕스에서는 저장하고 있는 상태값(데이터)를 state라고 부른다. 값이 저장될 때는 딕셔너리 형태로 보관한다. 

 

Action : 상태에 변화가 필요할 때 발생하는 것이다. 예를 들어서, 좋아요 기능이 있다고 할 때 사용자가 좋아요를 누르면, 좋아요에 해당하는 데이터가 변화된다. 그러니까 쉽게 말하면, 상태의 변화가 일어날 때 발생하는 어떤 것이라고 생각하면 된다. 

 

ActionCreator: 액션을 생성해주기 위한 함수이다. 

 

Reducer: 리덕스에 저장된 상태를 변경하는 함수이다. 실제로 변경시켜주는 함수. 실제로 실행되는 순서를보면 액션함수가 실행되고, 액션함수는 액션을 반환해준다. 그리고 리듀서가 현재 상태와 액션객체를 받아서 새로운 데이터를 만들고 리턴을 해준다. 쉽게 생각하면, 실제로 데이터를 변화시키는데에 관여하는 함수인가보다 하고 생각하면된다. 아래는 리듀서의 예시코드이다. 

const initialState = {
name: 'mean0'
}

function reducer(state = initialState, action) {
	switch(action.type){
	
    //action의 타입마다 케이스문을 걸어주면, 
    //액션에 따라서 새로운 값을 돌려준다. 
    case CHANGE_STATE:
     return {name: 'mean1'};
     
    default:
     return false;
     
  }
}
   

 

Store : 프로젝트 안에서 리덕스의 데이터를 사용하기 위해서 만드는 것이다. 스토어는 우리가 데이터를 볼 수 있게 해주는 친구이다.스토어 안에 는 리듀서가 하나밖에 들어가지 않는다. 만약 리듀서가 5개가 있었다면 어떻게 해야하는가? 리듀서를 하나로 합쳐서 스토어에 넘겨주어야 한다. 컴바인 리듀서라는 친구를 사용해서 넘겨준다.  

 

Dispatch: 실제로 정말 많이 사용되는 내장함수이다. 액션을 발생시키는 역할을 한다. 조금 더 자세히 설명해보겠다. 아까  말했듯이 어떤 액션이 일어나서 데이터를 변경시켜주고자 할 때, 액션이 일어나야하고, 이 액션이 일어나기 위해서는 액션함수가 액션을 반환해주어야 한다. 그러면 이 액션함수는 어떻게 호출하느냐? 바로 dispatch를 통해서 액션함수를 호출하는 것이다. 

dispatch(action)
//이런식으로 사용된다. 

---

리덕스의 주요한 특징 : 

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

왜 데이터를 action으로만 변경할 수 있는가? 그냥 직접 변경시키며 안되는 것일까. 안된다. 왜냐하면 모든 컴포넌트들은 store하나만 바라보면서 데이터를 받아오고 있다. 그런데, action을 통해서 store안의 데이터를 변경시켜주지 않으면, 다른 컴포넌트들은 데이터가 변경된 것을 알 수 없다. 이런 이유 때문에 store의 데이터는 오직 action으로만 변경할 수 있는 것이다.