외부 api를 요청하여 프로젝트를 하던 중 오류가 생겨서 api를 받아올 수 없었다. 크롬에 뜨는 에러상황을 가지고 원인을 검색해보니 해당 오류는 CORS 오류였다. 나는 리액트로 프로젝트를 진행 중이었기 때문에 검색을 하던 중 package.json에 proxy를 추가하는 방법을 통해 해결할 수 있었다. (아래 글 참조) https://nyang-in.tistory.com/237 리액트 CORS 오류 해결 방법 Access to XMLHttpRequest at '주소A' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control chec..

이번시간에는 리덕스를 좀 더 편하게 사용하는 방법에 대해 알아보겠다. 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를 사용하는 것만으로도 충분하지만 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 프로젝트의 규모가 클 경우에는 리덕..