[REACT] 리덕스(Redux)

😎·2022년 12월 2일
0

REACT

목록 보기
4/7

먼저 리덕스란?

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다.

공식홈페이지에서의 리덕스 설명이다.
내가 이해한 리덕스는
리액트에서 부모 자식컴포넌트간 데이터를 내려받는데 불필요한 단계를 줄여주는 라이브러리 정도로 생각했다 (Store)라는 곳에서 전역적으로 데이터를 관리해주어
원하는 컴포넌트에서 바로 내려받아 사용가능하게 해준다

리덕스의 핵심 요소

store

리덕스에서 가장 중요한 객체(인스턴스)입니다. 이 안에 현재 상태(데이터)를 가지고 있고, 액션값을 받은 디스패치함수가 리듀서로 전달한 상태값을 여기에 저장합니다.(복잡ㄷㄷ), 구독(subscribe)으로 상태가 업데이트 될 때 마다 다시 실행하게 해줍니다.

reducer

리듀서는 액션의 type에 따라 변화를 일으키는 함수입니다. 즉 스토어에 상태값이 들어가기전 액션값에서 전탈된 'type'의 종류에 따라 어떤 상태값으로 스토어에 리턴될지 정하는 수입니다. 스토어를 만드는 함수인 createStore()의 첫번째 파라미터에 들어가며 리듀서의 첫번째 파라미터엔 초기 상태값과 두번째 파라미터엔 액션값을 넣어줍니다.
(리듀서 첫번째 파라미터에는 최초의 상태값이 무조건 정의되어야 한다!)

dispatch

스토어의 메서드이고 상태값 업데이트를 실행하는 함수입니다. 디스패치가 실행되면 파라미터로 전달받은 액션값이 리듀서의 두번째 파라미터 객체로 전달됩니다. 그러면 리듀서 안에있는 코드들로 인하여 스토어에 상태값이 저장됩니다.

action

디스패치의 파라미터로 전달될 데이터입니다. 액션은 상태값이 어떻게 변할지 행동을 적어놓은 객체입니다.나중에 리듀서가 액션을 전달받으면 액션의 값에 따라서 다른 작업을 합니다. 그리고 액션에는 규칙이 몇가지있는데 액션은 무조건 객체여야합니다. 그리고 액션 객체에는 type 프로퍼티를 무조건 가지고 있어야합니다.(데이터 구분용, 스토어엔 저장안됨)

subscribe

스토어의 데이터가 변할때마다 실행되는 메서드입니다.


  1. View 에서 액션이 일어난다.
  2. dispatch 에서 action이 일어나게 된다.
  3. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다.
  4. middleware 에서 명령내린 일을 수행하고 난뒤, reducer 함수를 실행한다.
  5. reducer 의 실행결과 store에 새로운 값을 저장한다.
  6. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다.

이러한 리덕스에는 3가지 규칙이 있는데 살펴보자!

    1. Single source of truth
      동일한 데이터는 항상 같은 곳에서 가지고 온다.
      즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미다.
    1. State is read-only
      리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.
      리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.
    1. Changes are made with pure functions
      변경은 순수함수로만 가능하다.
      리듀서와 연관되는 개념이다.
      Store(스토어) - Action(액션) - Reducer(리듀서)
profile
개발 블로그

0개의 댓글