#28 TIL Redux란?

장석진·2021년 6월 7일
리덕스리액트자바스크립트코드스테이츠
0

Redux란?

"자바스크립트 앱에서 예측가능한 상태관리를 해주는 것"이다. React에서 각 형제 컴포넌트들 간에 데이터를 주고 받을 때, 부모 컴포넌트를 통해서 주고 받을 수 있는데 만약 형제 컴포넌트이 엄청 많아져서 상태 관리가 매우 복잡할 때 상태 관리 라이브러리인 Redux를 활용을 하면 된다. 이러한 리덕스에는 3가지 원칙이 있다.

1. Single source of truth(동일한 데이터는 항상 같은 곳에서 데이터를 가져온다. 데이터를 저장하는 store라는 하나뿐인 공간이 있다.)

  • Store는 상태가 관리되는 오직 하나의 공간이다. 컴포넌트들과 별개로 스토어 라는 공간이 있어서 그 스토어안에서 앱에서 필요한 state을 두고 컴포넌트들에서 state정보가 필요할 때 스토어에 접근해서 state정보를 가져올 수 있다.

    • 2. State is read-only(action이라는 객체를 통해서 state을 변경가능)

  • Action은 JavaScript객체이다. 객체안에 type을 비롯한 다른 타입의 객체들이 담긴다. 액션 객체는 스토어에게 우리 애플케이션에 데이터를 운반하는 역할

    • 3. Changes are made with pure function(변경은 순수함수로만 가능하다. Reducer)

  • Reducer는 현재 상태와 Action을 이용해 다음 상태를 만들어 주는 역할이다. Action객체는 Dispatch에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 State을 만들어낸다.

    • Redux의 장점

    1. 상태를 예측 가능하게 만들어 준다.
    2. 유지보수
    3. 디버깅에 유리하다(action과 state log 기록 시)
    4. 테스트를 붙이기 쉽다.

    데이터의 흐름

    profile
    장석진
    개발자가 되고 싶은 새내기
    이전 포스트

    #27 TIL Node. js란?

    다음 포스트

    #29 TIL Section2 회고록😎

    0개의 댓글