[복습]React 주요 개념정리 - 리덕스 개념

1. 리덕스란?

리덕스는 흔히 사용하는 상태관리 라이브러리 이다.

전역 상태관리를 할수있도록 도와주는 친구라고 생각하면된다.

 

* 리덕스 패키지 설치

yarn add redux react-redux

 

2. 리덕스 개념과 용어

리덕스는 데이터를 한군데 몰아넣고 여기저기에서 꺼내서 사용할 수 있도록 해주는 라이브러리이다.

 

- State 

리덕스에서 지정하는 상태값(=데이터) 이고, 딕셔너리 형태로 보관을 한다 {[key]: value}

 

- Action

상태에 변화가 필요할떄(=가지고 있던 데이터를 변경할때) 발생하는 것

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

 

액션은 객체이고, 위와같은 형식으로 사용되는데 type은 이름 같은것이다.

 

- 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 

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

생김새는 딕셔너리 or json 처럼 생겼다.

 

- dispatch

디스패치는 액션을 발생시키는 역할을 한다.

 

3. 리덕스 특징 

- store는 1개만 사용한다. 단일 스토어 규칙을 따라 한 프로젝트 당 한개의 스토어를 사용한다.

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

  setState() , useState() 훅을 써서 데이터를 변경했지만 마구잡이로 변경하는것을 막으면서 불변성을 유지해주기 위해

  리덕스에 저장된 state 는 읽기전용이라고보면되고, 가지고 있던 값을 수정하지않고 새로운 값으로 상태를 갈아끼워준다.

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

  즉, 리듀서는 순수한 함수여야한다.

  순수한 함수란 "파라미터 외에 값에 의존하지않는다." , "이전 상태는 수정하지 않고 변화를 준 새로운 객체를 리턴한다." , " 파라미터가 같으면 항상 같은값을 반환한다." , " 리듀서는 이전 상태와 액션을 파라미터로 받는다,"