vanilla redux

https://ko.redux.js.org/introduction/getting-started/

Redux 시작하기 | Redux

react를 공부하며 redux redux 하길래 뭔가 싶었는데 이제 시작했다.

redux는 뭘까?

 

redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. 

상태 state를 담은 뭔가라는 소린가?

일단 상태를 관리하는 라이브러리라고 한다.

컴포넌트들의 상태 관련 로직을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있다.

그리고 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다.

 

자 한가지 생각해보자. 리액트에서 상위 컴포넌트에서 사용하는 state가 있다고치자

이 state를 다른 하위 컴포넌트에게 전달해 쓰는게 일반적이다.

 

그런데~ 만약 그 하위에 더 하위 컴포넌트만 그 state를 써야 한다면? 

그렇다면 거쳐가는 루트가 복잡해진다. 굳이 쓰지 않는 컴포넌트도 이 state를 전달받고  다시 하위 컴포넌트로 전달을 해줘야 한다.

 

그런데! redux를 쓰면 이 단점을 보완할 수 있다고 한다. redux store라는 곳에서 바로 전달을 해줄 수 있는것이다.

왜냐 상위 컴포넌트가 아닌 redux store라는 곳에서 이 상태를 관리하고 있기 때문에 바로 전달을 해줄 수 있다.

 

그럼 배워보자.

 

간단하게 redux를 이용하지 않고~ counting하는 코드를 써보자.

요렇게 작성이 가능하다.

 

그럼 이번에는 redux를 이용해서 해볼까?

여기서 state는 뭔가 당연히 count이다.

 

먼저 redux를 설치해주고~ react-redux가 아닌 vanilla이니    그냥 redux를 설치한다.

 

그리고 중요한 reducer와 store를 만들어준다

그럼 reducer와 store가 뭔가?

 

store를 콘솔창에 찍어보자.

5개의 function이 보인다.

이중 중요한? 아니 일단 먼저 배운 것은 dispatch와  getState subscribe등이다.

getState로 current state를 가져올 수 있고 dispatch(action)을 통해 store의 reducer에 action을 전달한다.

redux에서 상태 변경을 일으키는 유일한 방법이다.

 

자 다시 돌아와서 store는? state를 관리하는 전용 저장소로 state들이 객체로 저장된다. 규모가 커지면 state를 카테고리별로 관리하게 된다.

 

그럼 reducer는 뭘까.  단지 두개의 파라미터를 받는 순수 자바스크립트 함수이다.

파라미터는  현재의 state와 action을 받는다.

오로지 reducer로만 state를 받을 수 있다.

 

자 그럼  action은 뭘까?

reducer가 state를 언제 제공할지를 결정하는 파라미터이다.

모든 action은 state가 어떤때 변해야 하는지를 나타내는 type속성을 꼭 필요로 한다. type속성은 문자열이다.

 

자 살짝 맛보기를 봤고 이제 상기 코드를 수정해보자.

뭔가 vanilla보다 더 복잡해보이지만 상태관리의 최고이다.

reducer에서 action.type에 따라 return값을 달리해준다.

 

getState로 현재값을 가져오고 그값을 span에 넣어주는 함수를 만들고 subscirbe에 넣어주면 된다.

그리고서 기존 이벤트 리스너에 callback함수를

음 어렵게 생각하지말자.

 

잘하고있다. 아 어제도 못자서 그런가 너무 졸리다 내일 이어서 포스팅!