스파르타 코딩클럽 - 리액트 3주차(6)

1. 리덕스란?

1-1. 리덕스 패키지 설치 & 공식문서 보기.

리덕스는 아주 흔히 사용하는 상태관리 라이브러리이다. 전역 상태관리를 편히 할 수 있게 해주는 고마운 친구라고 생각하면 된다.

• 리덕스 패키지 설치하기.

yarn add redux react-redux

• 리덕스 공식문서(링크텍스트)

1-2. 리덕스 개념과 용어.

• 리덕스란?

리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 해주는 친이다.

• 리덕스의 기본 용어(키워드 삼기 좋은 용어)들!

  • State

    리덕스에서는 저장하고 있는 상태값("데이터"라고 생각해도된다!)를 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

    스토어에는 리듀서, 현재 애플리케이션 상태, 리덕스에서 값을 가져오고 액션을 호출하기 위한 몇 가지 내장 함수가 포함되어 있다. 생김새는 딕셔너리 혹은 json처럼 생겼다. 내장함수는 공식문서에서 보면된다.

  • dispatch

    리덕스는 사실, 리액트와 별도로 사용할 수 있는 친구이다. 상태관리를 위해 다른 프론트엔드 프레임워크/ 라이브러리와 함께 사용할 수 있다.

1-3. 리덕스의 3가지 특징

• store는 1개만 사용한다.

  리덕스는 단일 스토어 규칙을 따른다. 한 프로젝에 스토어는 하나만 쓴다.

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

  리액트에서도 state는 setState()나, useState() 훅을 써서만 변경 가능했다. 데이터가 마구잡이로 변하지 않도록 불변성을 유지해주기 위함이다. 여기서 불면성은 간단하게 허락없이 데이터가 바뀌면 안된다는 소리이다. 조금 더 그럴 듯하게 말하면, 리덕스에 저장된 데이터 = 상태 = state는 읽기 전용이다.

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

  리듀서는 순수한 함수여야 한다는 말이다. 순수한 함수라는 건, 첫째, 파라미터 외의 값에 의존하지 않아야한다. 둘째, 이전 상태는 수정하지(=건드리지)않는다(변화를 준 새로운 객체를 return 해야한다.), 셋째, 파라미터가 같은면, 항상 같은 값을 반환한다. 넷째, 리듀서는 이전 상태와 액션을 파라미터로 받는다.