리덕스란? - 리덕스를 통한 상태관리

우선, 리덕스에 대해서 알아보기 위해 패키지 부터 설치하자.

(리덕스는 상태 관리 라이브러리이며, 전역상태 관리를 할 수 있도록 도와준다.)

 

리덕스 패키지 설치

yarn add redux react-redux

 

* 리덕스 공식문서

https://ko.redux.js.org/introduction/getting-started/

Redux 시작하기 | Redux

 

1. 리덕스 개념과 용어

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

 

- State

  리덕스에서 저장하고 있는 상태값(=데이터)이며, 딕셔너리 형태로 보관된다. → ({[key]: value});

 

- 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 

프로젝트에 리덕스를 적용하기 위해 필요한 함수

(앱의 전체 상태 트리를 가지고 있는 저장소이며, 이 안의 상태를 바꾸는 유일한 방법은 여기에 액션을 보내는 것 뿐.)

 

※ Store 메소드 종류  - getState() : 애플리케이션의 현재 상태 트리를 반환한다. 저장소의 리듀서가 마지막으로 반환한 값과 동일  - dispatch(action) : 액션을 보낸다. 이것이 상태 변경을 일으키기 위한 유일한 방법  ※ Store 특징   - Store 는 1개만 쓴다 (리덕스는 단일 스토어 규칙을 따른다. 한 프로젝트에 스토어는 하나만)  - store의 state(데이터)는 오직 action으로만 변경할 수 있다.)    → 리액트에서 state는 setState() or useState() 훅을 써서 변경을 했는데, 마구잡이로 변하는것을 막고 불변성을 유지        하기위해 오직 action 으로만 변경이 가능하다.         (정리하자면, Store에서는 가지고 있던 값을 수정하는게 아니라 새로운 값을 만들어서 갈아끼워주는 방식이다.)  -  리듀서는 어떤 요청이와도 같은 동작이 이루어져야한다.     → 이말은, 파마리터외의 값에 의존하지 않고, 이전 상태는 수정(=건드리지) 않고 변화를 준 새로운 객체를 리턴하고         파라미터가 같으면 항상 같은값을 반환하고, 리듀서는 이전 상태와 액션을 파라미터 받는다.

 

 

2. 리덕스 상태관리 필요성 

  - 자식컴포넌트는 부모 컴포넌트의 state를 수정할 수 없다. 

     (데이터는 단반향으로만 흐르기떄문에)

  

상태 관리 흐름도 

1. 리덕스 Store를 컴포넌트에 연결한다.

2. Component에서 상태 변화가 필요할 때 Action을 부른다.

3. Reducer를 통해서 새로운 상태 값을 만들고

4. 새 상태값을 Store에 저장한다.

5. 컴포넌트는 새로운 상태값을 받아온다. → props를 통해 받아오니까 새롭게 랜더링 될것