이번시간에는 리덕스를 좀 더 편하게 사용하는 방법에 대해 알아보겠다. redux-actions : 액션 생성 함수, 리듀서를 작성할 때 편하게 쓸 수 있게 해주는 라이브러리 immer 설치: yarn add redux-actions reducx-actions redux-actions를 사용하면 액션 생성 함수를 더 짧은 코드로 작성할 수 있다. 리듀서를 작성할 때도 switch/case 문이 아닌 handleActions 함수를 사용하여 각 액션마다 업데이트 함수를 설정하는 형식으로 작성할 수 있다. import { createAction } from "redux-actions"; // 액션 타입 정의하기 const INCREASE = "counter/INCREASE"; const DECREASE = "..

이제는 컴포넌트에서 리덕스 스토어에 접근하여 원하는 상태를 받아오고 액션도 디스패치해줄 것이다. 리덕스 스토어와 연동된 컴포넌트를 '컨테이너 컴포넌트'라고 부른다. CounterContainer 만들기 import React from "react"; import Counter from "../components/Counter"; const CounterContainer = (props) => { return ; }; export default CounterContainer; ✅containers/CounterContainer.js 위 컴포넌트를 리덕스와 연동하려면 react-redux에서 제공하는 connect 함수를 사용해야 한다. connect 함수는 다음과 같이 사용한다. connect(mapSta..

스토어를 만들고 리액트 어플리케이션에 리덕스를 적용하는 작업은 src > index.js에서 이루어진다. 스토어 만들기 import React from "react"; import ReactDOM from "react-dom"; import { createStore } from "redux"; import App from "./App"; import rootReducer from "./modules/index"; const store = createStore(rootReducer); ReactDOM.render( , document.getElementById("root") ); ✅index.js Provider 컴포넌트를 사용하여 프로젝트에 리덕스 적용하기 리액트 컴포넌트에서 스토어를 사용할 수 있도록 ..

리덕스, react-redux 라이브러리 설치하기 yarn add redux react-redux 리덕스를 사용할 때 가장 많이 사용하는 패턴 리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트 / 컨테이너 컴포넌트를 분리하는 것이다. 프레젠테이셔널 컴포넌트 : 상태 관리가 이루어지지 않고, 그저 props를 받아와서 화면에 UI를 보여 주기만 하는 컴포넌트 컨테이너 컴포넌트 : 리덕스와 연동되어 있는 컴포넌트, 리덕스로부터 상태를 받아 오기도 하고 리덕스 스토어에 액션을 디스패치 하기도 하는 컴포넌트 이러한 패턴은 필수 사항은 아니지만 이 패턴을 사용하면 코드의 재 사용성도 높아지고 관심사의 분리가 이루어져 UI를 작성할 때 좀 더 집중할 수 있다. 예제 만들어보기..

리덕스란? 리덕스 : 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있음 컴포넌트끼리 똑같은 상태를 공유해야할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있음 전역 상태를 관리하는데 굉장히 효과적 지금은 Context API를 통해서도 똑같은 작업을 할 수 있음 → 하지만 예전에는 Context API가 사용방식이 불편했으므로 주로 리덕스를 사용해서 전역 상태 관리를 해왔음 단순히 전역 상태 관리만 한다면 Context API를 사용하는 것만으로도 충분하지만 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 프로젝트의 규모가 클 경우에는 리덕..

Context API를 사용하여 전역 값 관리하기 App 컴포넌트에서 onRemove, onToggle 함수가 있고 App -> UserList -> User 이렇게 전달이 되는 구조일 때 사실상 UserList에서는 onRemove, onToggle 함수가 직접적으로 사용이 되지 않음에도 불구하고 User 컴포넌트에게 전달해주기 위해서 App에서 props로 받아와서 User 컴포넌트에게 전달해주고 있습니다. 다리역할만 하고 있는 것이죠. 지금 같은 상황은 크게 문제가 되지 않으나 컴포넌트의 구조가 복잡해진다면 이런 구조로 계속 하위 컴포넌트에 전달이 되는 구조로 작성한다면 난해해질 것입니다. 이런 상황은 Context API를 사용하여 해결할 수 있습니다. import React from "react..