리덕스 in react

by

‘리덕스’ 가 무엇이냐?

딱 잘라 말할 수 없는 ‘개념’적인 것이다. 일종의 프레임워크-라이브러리?-같은거라 생각하면 됨..(‘스프링 프레임워크가 무엇이냐?’ 라고 질문받으면 할 말이 없는거랑 똑같음…)

굳이 한마디로 축약하자면 ‘상태 관리 라이브러리’ 정도이다. 근데 자바 개발자에겐 복잡함….홍길동마냥 동에번쩍 서에번쩍…..;;

일단 전반적인 동작과정을 최대한 축약해서 말하자면 다음과 같이 말할 수 있다.

  • 컴포넌트(혹은 컨테이너)에서 action을 dispatch하여, reducer가 action에 따른 정해진 동작을 수행한다.
    • 이때, 명시적으로 사용자의 동작이 action을 dispatch할 수도 있고.
    • useEffect마냥 컴포넌트가 ‘마운트(로딩?)’ 될 때 묵시적으로 action을 dispatch할 수도 있고.
  • reducer가 동작을 수행하면 새로운 상태를 리턴 할텐데, 이를 store에 저장한다.

use case

  • store에서의 특정 값을 읽고 싶다!
    • 간단함. state를 걍 읽으면 된다.
      • 아 그래서 어떻게 읽냐고 ㅋㅋㅋㅋㅋ
        • 컴포넌트의 props와 매핑을 하면 된다.
        • react-redux 패키지의 connect라는 내장 메소드가 있음
        • state와 컴포넌트의 props를 매핑하는 기능 제공. 매뉴얼에 따라 매핑하면 됨.
  • store에서 특정 값을 쓰고 싶다!
    • 안간단함. 그냥 state를 write할 순 없다.
      • 그럼 못함?
        • 아니. 리덕스의 개념을 잘 생각해보자. action을 dispatch해서, reducer가 state를 변경시키는 구조임
        • 그렇다. store의 값을 바꾸고 싶으면 action을 dispatch하면 된다!
      • 그럼 그 action을 dispatch는 어케 하는데?
        • state를 읽는 상황과 비슷하게, ‘action을 dispatch하는 함수’를, props와 매핑을 하면 된다.
        • react-redux 패키지의 connect라는 내장 메소드를 통해 가능함.
        • props 메소드를 호출하듯 함수 콜을 해 버리면, (함수가 ‘action을 dispatch하는 동작’이 코딩되어있으니) 자연스레 action이 dispatch된다.ㅇㅇ

액션

말 그대로 액션 그 자체. 일종의 json 객체인데

반드시 type 프로퍼티는 하나 있어야 한다.(무슨 행위를 해야 할 지 결정하는 ‘키값’이라고 생각하면 될듯)

액션 생성 함수

const changeInput = text => ({
  type: 'CHANGE_INPUT',
  text
});

액션 객체를 만들어주는 함수… 동작이 fire될 떄마다 액션을 새로 만들어서 사용하면 되겠지만, 이렇게 액션 생성하는 함수로 관리해 주는게 좋으니 뭐…

리듀서

변화를 일으키는 함수. 액션을 일으키는게 아니라, 액션을 받고 ‘상태를 변화’ 하는 것이다.

  • 현재 상태 && 전달받은 액션객체를 파라미터로 받아옴
  • 그리고 이 두값을 참고해, 새로운 상태(액션) 을 만들어서 반환
  • 예
    • 현재상태 : -7
      • 전달받은 액션객체: type이 ‘increase’ 인 문자열
      • 리듀서의 메소드 바디 : 현재상태+1 –> -6

스토어

리덕스를 적용하기 위해 만드는 스토어. 어플리케이션별로 하나만 가질 수 있음

다음 두가지 속성이 들어가 있음

  • 현재 어플리케이션 상태
  • 리듀서

디스패치

액션을 발생하는 내장 함수. 보통 dispatch(action) 형태로 호출됨…

디스패치가 fire되면, 리듀서가 실행되며 새로운 상태(액션객체) 가 생성되는 구조이다.

구독

좋아요,알림설정

subscribe함수 안에 리스터 함수를 파라미터로 넣으면,

리스너 함수가 디스패치되어, 상태가 업데이트 될 때 마다 호출됨

Leave a Comment