리덕스 Redux 알아보기

bbio3o·2021년 2월 26일
0

Redux

목록 보기
1/1
post-thumbnail

벨로퍼트님 유튜브, 벨로퍼트님 리덕스 왜 쓸까?, 리덕스 소개들을 출처로 정리한 포스트입니다.

📌 리덕스?

상태 관리 라이브러리
리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있습니다.

📌 FLUX 아키텍쳐

Dispatcher가 받은 Action을 통제하여 Store에 있는 데이터를 업데이트합니다. 변동된 데이터가 있다면 View에 렌더링 해줍니다.

View에서 Store로 바로 접근하지 않으며, 위 그림과 같이 Dispatcher로 Action을 보냅니다. 여기서 Dispatcher에서는 작업이 중첩되지 않도록 해줍니다.

어떤 Action이 Dispatcher를 통해 Store에 있는 데이터를 처리하고 그 작업이 끝날 때 까지 Dispatcher에서 Action을 대기 시킵니다.

Flux 카툰 안내서

http://bestalign.github.io/2015/10/06/cartoon-guide-to-flux/


📌 Redux 특징

  1. Single Source of Truth
    어플리케이션의 state를 위해 단 한개의 store를 사용합니다.
    이는 Flux와의 주요 차이 입니다. Flux에서는 여러개의 store를 사용합니다.

  2. State is Read-only
    어플리케이션에서 store와 state를 직접 변경할 수 없습니다.
    state를 변경하기 위해선 무조건 action이 dispatch 되어야 합니다.

  3. Changes are made with pure Functions
    action 객체를 처리하는 함수를 reducer라고 부릅니다.
    reducer는 정보를 받아서 상태를 어떻게 업데이트 할 지 정의합니다.

    reducer는 '순수 함수' 로 작성되어야 합니다.
    즉, 비동기 처리 불가, 네트워크 및 데이터베이스 접근 X, 인수 변경X
    같은 인수로 실행된 함수는 언제나 같은 결과를 반환합니다.(순수함수 특징)
    '순수하지 않은'API 사용 불가(Date.now(), Math.random() 등)

Flux는 컨트롤러 뷰(controller view)와 일반 뷰(regular view)를 가지고 있습니다. 컨트롤러 뷰는 중간 관리자 같아서 스토어와 자식 뷰 사이에서 커뮤니케이션을 관리합니다.

Redux도 비슷한 컨셉을 가지고 있습니다. 영민한 컴포넌트(똑똑한 컴포넌트)와 우직한 컴포넌트(멍청한 컴포넌트)가 그것입니다. 영민한 컴포넌트는 관리자처럼 행동하는데, Flux의 컨트롤러 뷰보다 몇몇 규칙을 더 따릅니다.

멍청한 컴포넌트들은 Redux와 연관되어 있지 않으며, props에서 데이터를 읽는다. 또한, css style이나 DOM을 관리합니다.

액션이란? 어떠한 변화가 필요하면 액션이 발생합니다. 작업에 대한 정보를 지니고 있는 객체
어떠한 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거롭고, 만드는 과정에서 실수로 정보를 놓칠 수 있기에, 이를 액션 객체를 만들어 주는 액션 생성 함수를 이용합니다.


리듀서란? 리듀서는 변화를 일으키는 함수입니다. 액션을 만들어서 발생시키면, 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아옵니다.

이전 상태와 액션을 받아서 다음 상태(새로운 상태)를 반환합니다. 꼭 알아야할 것은 이전 상태를 변경하는 것이 아니라 새로운 상태를 반환한다는 사실! → 기존 상태를 복사하고 변화를 준 다음에 반환하는 형식


스토어란? 어플리케이션의 현재 상태를 지니고 있습니다. 한 개의 프로젝트는 단 하나의 스토어만 가지고 있습니다.


디스패치? 스토어의 내장 함수 중 하나로, '액션을 발생시키는 것'이라 이해하면 됩니다. 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 줍니다.


구독? 구독도 스토어의 내장 함수 중 하나로, subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해주면, 이 리스너 함수가 액션이 디스패치 되어 상태가 업테이트 될 때마다 호출됩니다.!

Redux 카툰안내서

http://bestalign.github.io/2015/10/26/cartoon-intro-to-redux/

profile
그림도 그리는 개발자 🎨👩‍💻

0개의 댓글