React / Redux [1] - Redux 기본 개념

해당 게시물은 udemy-React 완벽가이드 강의와 Redux 공식 문서를 바탕으로 작성된 글입니다.

 

[리덕스]

크로스 컴포넌트 또는 앱와이드 상태를 위한 상태관리 시스템

 

강의에 따르면 보통 리액트의 상태를 세가지로 나눌 수 있음

 

1. 로컬 상태

단일 컴포넌트에 속한 상태

보통 useState나 useReducer를 사용해서 상태를 관리함

 

2. 크로스 컴포넌트

다양한 컴포넌트에 속한 상태

보통 useState나 useReducer를 사용해서 상태를 관리함

혹은 prop chain, prop drilling을 통해 관리

 

3. 어플리케이션 전체 상태

앱 전체 혹은 모든 전체에 대한 상태 관리

보통 useState나 useReducer를 사용해서 상태를 관리함

혹은 prop chain, prop drilling을 통해 관리

 

위와 같은 방법으로 하는 크로스 컴포넌트와 앱와이드 상태 관리는 복잡하고, 번거롭기 때문에 Redux를 사용하고자 함.

(Redux는 리액트에서만 사용가능한 라이브러리는 아니고, 어디서든 사용할수 있는데 이름이 비슷해서 약간 헛갈림)

 

[React Context]

비슷한 내장된 기능으로 React Context가 있음.

하지만 이 기능만 사용해서 상태를 전체 관리하기에는, 조금 힘듦.

왜냐면 React Context는 코드 분할이 어렵고, 만약 코드 분할을 하게된다면 Provider속 Provider가 중첩되는 jsx코드가 나오기 때문에 가독성이 떨어짐.

또한 데이터 변경이 자주 일어나는 경우에는 성능상의 문제가 발생할 수 있음.

그래서 필요한 경우에 따라 라이브러리와 Context를 잘 섞어서 사용하는 것이 중요함.

 

[Redux 작동 방식]

중앙 데이터 저장소에 모든 상태가 저장됨

여기서 데이터를 빼다가 넣었다가 하는식으로 사용하는 방식

 

컴포넌트가 저장소를 구독하고, 컴포넌트가 필요한 데이터를 받음.

데이터는 구독만 될뿐 데이터를 조작하지 않음.

 

대신 리듀서 함수를 통해 데이터 mutate(change)를 진행함

(useReducer 훅을 이야기하는게 아님)

 

즉 데이터 변경이 될 가능성이 있다면, 그를 행하는 리듀서 함수를 미리 만들어 둬야함.

그리고 난 후에 컴포넌트에서 Action을 dispatch함

그러면 액션이 리듀서에 전달하고 리듀서가 수행되면서 상태가 업데이트 됨

이렇게 중앙 데이터의 상태가 바뀌면, 구독하고있던 컴포넌트에게 알림이 가고 업데이트된 UI가 나오는 방식

 

[Redux 구현]

const redux = require("redux");

const counterReducer = (state = { counter: 0 }, action) => {
  if (action.type === "increment") {
    return {
      counter: state.counter + 1,
    };
  }

  if (action.type === "decrement") {
    return {
      counter: state.counter - 1,
    };
  }

  return state;
};

const store = redux.createStore(counterReducer);

const counterSubscriber = () => {
  const latestState = store.getState();
  console.log(latestState);
};

store.subscribe(counterSubscriber);

store.dispatch({ type: "increment" });
store.dispatch({ type: "decrement" });

오늘 볼 코드는 위와같음.

항상 react고 vue고 뭐고, 자바스크립트를 조금이라도 아주 조금이라도 깊게 공부해두면 기초 사용은 엄청 쉬운것같당.

위에서 본 redux의 기본 작동 개념을 토대로 설명

 

일단 redux를 사용하려고 하면 설치해야함.

npm install redux

 

이렇게 설치해주고 불러옴

const counterReducer = (state, action) => {
  return state;
};

 

우선 상태의 기본을 정의해줘야함.

위에서 말했던 리듀서 함수임.

리듀서 함수는 두개의 파라미터가 오는데,

첫번째는 기존의 상태, 혹은 초기값 상태라고 할수 있는 state,

두번째는 그 상태를 mutate할 action임

 

그리고 이 함수는 어떠한 값을 return하도록 만들어줘야하는데,

위에서는 그냥 현재의 state값을 return 하도록 정함.

 

이제 이 리듀서를 스토어에 저장해야함!

스토어는 위에서 말했던 중앙저장소 개념으로 이해하면 될듯!

---

 

const store = redux.createStore(counterReducer);

불러온 redux에 createStore 메소드를 사용해서 인자로 아까만든 리듀서를 전달해줌.

redux 공식문서를 보면 redux toolkit을 이용하는 방식으로 설명이 되어있던데,

일단은 강의를 따라가면서 기본을 배우고 나중에 툴킷으로 해당 내용을 구현해보려고 함.

---

그리고 난 다음 이제 이 저장소를 사용해주기 위해 구독을 해야함.

const counterSubscriber = () => {
  const latestState = store.getState();
  console.log(latestState);
};

store.subscribe(counterSubscriber);

구독을 할땐 구독을 하는 함수를 만들어서

creatStore로 생긴 subscribe 메소드를 활용해서 구독함수를 지정해줌으로써 구독이 완료됨.

이때 구독을 하는 함수또한 값을 return 하는식으로 만들어줘야하는것 같음(이건 강의를 점차 들으면서 다르면 수정!)

 

이렇게하면 기본적으로 앱을 실행시키면

저장소 -> reducer 초기화 -> reducer 구독

의 프로세스가 진행됨

---

이제 저장소에 있는 상태들의 값을 변화시키고 싶을땐,

위에서 말했던 액션을 진행시켜줘야하는데 이 액션은 dispatch 매서드로 트리거 시킴

store.dispatch({ type: "increment" });
store.dispatch({ type: "decrement" });

위 코드에 이렇게 되어 있는 부분인데,

dispatch는 기본적으로 객체를 인자로 받고, 그 안에 type 설정을 통해 어떤 액션을 할지 지정해줄수 있음

 

const counterReducer = (state = { counter: 0 }, action) => {
  if (action.type === "increment") {
    return {
      counter: state.counter + 1,
    };
  }

  if (action.type === "decrement") {
    return {
      counter: state.counter - 1,
    };
  }

  return state;
};

 

이제 리듀서 함수에서는 디스패치로 트리거 된 액션을 실행시켜야하니 액션에 맞는 함수를 이렇게 만들어주면됨.

약간 switch구문같은 느낌이 든당

 

reducer로 반환되는 값은 상태 변화도 되기 때문에,

위와같이 return 값을 객체로 변화되는 값을 지정해주면 해당 액션에 의해서 그 값이 반환되며 상태변화가 진행됨

 

기본개념은 이러함.

여기 기능까지만 써도 정말 다양한 기능 구현이 가능할것같당.

 

일단 1편은 여기까지

---

참고강의

https://www.udemy.com/course/react-the-complete-guide-incl-redux/