비실이의 개발 성장기

Redux란? 본문

프론트엔드/react.js

Redux란?

DubbingLee 2017. 7. 8. 11:43

    Redux 등장배경

    • facebook에서 react와 함께 소개한 Flux 아키텍쳐를 구현하기 위한 라이브러리
    • 컴포넌트 간 state 데이터를 효율적으로 관리하기 위해 등장
    • Flux 와 MVC 패턴의 차이
      • MVC 패턴은 앱의 규모가 커지면 그에따라 Model과 View가 늘어나기에 프로젝트가 복잡해진다.
      • Model과 View가 1:1관계가 아니므로 데이터 관리도 어렵다는 단점이 있다.
      • Flux 특징은 http://2dubbing.tistory.com/26 [flux 아키텍쳐란?]  포스팅 참고
    • Redux는 facebook에서 만든 라이브러리는 아님.
    • Redux는 React에 의존적이지 않음. (React 프로젝트가 아니더라도 Redux 사용이 가능함을 뜻함)
    • React로 개발한 어플리케이션에 새로운 기능을 추가 -> 그만큼 관리해야하는 state 가 늘어남 -> 이를 Redux 를 사용하여 효율적으로 관리 가능

    Redux의 특징

    • 단 하나의 store만 존재한다. (flux는 여러개의 store 사용)
    • store에 있는 state는 Read-only 속성이며, state를 핸들링 하려면 반드시 action을 통해서…
    • reducer는 pure function 해야 한다. (action객체를 처리하는 함수를 reducer라 부름)
    • pure function이라 함은, 함수 내부로직에 네트워크 통신이나 데이터베이스 접근 등… 행위가 이루어지지 않음을 뜻함.)
    • reducer는 action에서 받은 정보를 어떻게 업데이트 할지만 정의.
    • reducer는 여러개 존재가능.


    Action 이란?

    • '작업에 대한 정보’ 를 지니고있는 객체
      • ex) 값을 증가시키기, 값을 감소시키기, 새로운 색상 설정하기….

    Reducer 란?

    • ‘변화'를 일으키는 함수.
    • pure해야 한다. (네트워크 통신, 비동기 작업, 인수 변경 등의 행위가 존재하면 안 됨.)
    • '이전 상태'와 ‘액션'을 받아서 '다음 상태'를 반환한다.
    • 파라미터 인 '이전 상태'의 데이터는 immutable 해야 한다.


    Store 란?

    • 어플리케이션의 현재상태를 지니고 있음
    • redux에서 Store는 단 한개만 존재
    • redux의 createStore() 를 사용하여 Store 생성
      • ex) import { createStore } ‘redux’;
      •       const store = createStore(reducers);
    • reducer에서 전달받은 action을 redux의 dispatch() 함수를 사용하여 store로 전달
    • 현재 store의 state 상태를 알고 싶을 땐, redux의 getState() 를 사용
    • store의 state상태가 바뀔때 실행할 함수를 등록하려면 redux의 subscribe(listener) 사용
    • redux의 unsubscribe() 함수를 통해 subscribe()에 등록한 콜백함수 구독을 취소

    react-redux 란?

    • view 레이어 바인딩 도구
    • Provider는 컴포넌트에서 redux를 사용하도록 제공하는 컴포넌트
    • connect 함수는 컴포넌트를 redux에 연결하는 또다른 함수를 반환한다.




'프론트엔드 > react.js' 카테고리의 다른 글

componentDidCatch() 함수 확인  (2) 2018.08.30
Redux란?  (1) 2017.07.08
react 알게된 점  (0) 2016.11.01
1 Comments
댓글쓰기 폼