리덕스
26_타입스크립트 & 리덕스
이번엔 타입스크립트와 리덕스를 사용해보자. npx create-react-app my-app --template typescript 먼저 타입스크립트를 사용하는 리액트 프로젝트를 하나 만들어준뒤, yarn add redux react-redux redux와 react-redux 라이브러리를 설치해준다. 완성된 프로젝트의 node modules파일안에서 설치한 라이브러리를 보면 index.d.ts가 있는걸 볼 수 있는데 이 파일이 있다면 redux에선 타입스크립트를 지원해주는 것이다. react-redux에는 따로 지원해주지 않기 때문에 yarn add @types/react-redux 이를 이용해서 typescript를 적용시킬 수 있다. 어떠한 라이브러리에서 타입스크립트를 지원해주는지 아닌지는 아래 사..
22_리덕스 미들웨어
리덕스 미들웨어를 쓰지 않는건 리덕스를 쓸 이유가 없다는 것과 같다! 액션이 일어나고 리듀서가 일어나기 전에 코드를 실행하게 하거나 액션을 수정하거나 또다른 액션을 만들어서 dispatch를 한더던지 등등의 기능을 쓸 수 있다. 주로 API요청과 같은 비동기 작업을 처리할때 굉장히 유용하게 쓸 수 있다. 먼저 리액트 프로젝트를 하나 만든 후에 yarn add redux react-redux redux라이브러리와 react-redux라이브러리를 설치해 준다. 그 이후 간단한 리덕스 구조를 만들어주자. 저번 글에서 했던 카운터 예제를 다시한번 구현해보자. 다음과 같은 파일구조를 만들어주고 //counter.js const INCREASE = 'INCREASE'; //action type const DECRE..
21_리액트_리덕스
리덕스 사용률이 가장 높은 상태관리 라이브러리 ContextAPI + useReducer을 사용한 개발흐름과 유사하다. Context와의 차이점 1. 미들웨어 비동기 작업을 더욱 체계적으로 관리가 가능하다. 2. 유용한 함수, Hooks 라이브러리 내 함수들과 Hook을 지원받을 수 있다. ex) connect,useSelector,useDispatch ... 3. 기본적인 최적화가 이미 되어있다. 4. 하나의 커다란 상태 모든 글로벌상태를 큰곳에 넣어서 사용 5. DevTools 여러 도구가 있다. 6. 이미 사용중인 프로젝트가 많음 리덕스의 사용시기? 프로젝트가 클수록, 비동기 작업을 할수록, 리덕스가 편할수록 리덕스를 사용하면 된다. 사용 키워드들 액션 상태변화가 필요하게 될때 사용 { type :..