리액트 Redux 기초 개념 정리

✔️ Redux란?

리덕스는 리액트에서 많이 사용되는 상태 관리 라이브러리 중 하나입니다. 리덕스를 사용하게 되면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적인 관리가 가능하게 됩니다.

✔️ Redux 설치

npm i redux react-redux

✔️ Redux 기본개념

리덕스는 크게 3가지의 기본 개념이 있습니다.

동일한 데이터는 항상 같은 곳에서 가지고 온다.

• 이는 곧 Store라는 하나 뿐인 데이터 공간이 있다는 것을 의미합니다. (중앙 상태 관리)
• 이러한 점 덕분에 디버깅이 쉬워집니다.

액션 객체를 통해서만 상태 변경 가능

• 기본적으로 상태는 읽기 전용(read-only) 입니다.
• 리액트에서 setState 메소드를 활용해야만 상태 변경이 가능하듯이 리덕스에서도 액션이라는 객체로만 상태를 변경할 수 있습니다.

변경은 순수 함수로만 가능

• 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받습니다.
• 파라미터 외의 값에는 의존하면 안됩니다.
• 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환합니다.
• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 합니다.

✔️ Redux 기본용어

아래는 Redux에 대해서 기본적으로 알아야 할 용어들입니다.

액션(Action)

• Store의 상태를 변경하는 용도로 사용
• 직접 상태를 변경하기 보다는 어떤 상태로 변경할 것인지 결정

액션을 일종의 주문서 같은 것인데 자바스크립트 객체 형식으로 되어있습니다.

액션의 표현

{
   type: 'ADD_TODO',
   data: {
       id: 1,
       text: '라임'
   }
}

액션은 위와 같이 표현되며 type 필드는 필수로 가지고 있어야 합니다.

액션 생성함수

function addTodo(data) {
  return {
    type: "ADD_TODO",
    data,
  };
}

액션 생성함수는 말그대로 액션 객체를 만들어주는 함수입니다.

리듀서(Reducer)

• State를 정의하고 전달받은 액션에 따라 Store의 상태 변경이 이루어집니다.
• 실제 Store의 상태 변경은 Reducer 에서 이루어집니다.
• 업데이트 로직을 정의 하는 함수라고도 할 수 있습니다.

const initialState = { value: 0 };

function counterReducer(state = initialState, action) {
  // Check to see if the reducer cares about this action
  if (action.type === "counter/increment") {
    // If so, make a copy of `state`
    return {
      ...state,
      // and update the copy with the new value
      value: state.value + 1,
    };
  }
  // otherwise return the existing state unchanged
  return state;
}

스토어(Store)

• 액션과 리듀서의 연결지점입니다.
• Store는 dispatch, getState, subscribe 메서드가 담겨있는 일종의 객체일 뿐입니다.
• Redux는 Store를 오직 하나만 가집니다.

Store Methods

1. getState() : 애플리케이션의 현재 state 반환 => reducer 마지막 반환 값
2. dispatch(action) : action을 파라미터로 받고 dispatch를 호출하면 store는 reducer를 실행합니다.
3. subscribe(listener) : 변경사항에 대한 리스너 추가, subscribe에 리스너를 전달해주면 액션이 디스패치 될 때마다 전달해준 리스너가 호출됩니다.
4. replaceReducer(nextReducer)

✔️ Redux는 언제 쓰면 좋을까?

해당 내용은 Redux 공식 문서에 나와있습니다 :)

https://redux.js.org/faq/general#when-should-i-use-redux

• 앱의 여러 위치에서 필요한 많은 양의 상태들이 존재할 때 (전역 상태가 필요하다고 느껴질 때)
• 상태들이 자주 업데이트 될 때
• 상태를 업데이트 하는 로직이 복잡할 때
• 앱이 중간 또는 큰 사이즈의 코드를 갖고 있고 많은 사람들에 의해 코드가 관리될 때
• 상태가 업데이트되는 시점을 관찰할 필요가 있을 때

✔️ 참고사이트

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

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)