REACT

이번 포스팅에서는 react-redux 라이브러리에서 제공하는 Provider를 사용하여 app 전체에서 store를 사용할 수 있는 방법과 useSelector를 사용하여 상태값을 가져오는 방법, useDispatch를 사용하여 상태값을 업데이트 방법에 관해 정리해보려한다. 목차 react-redux 설치 Provider를 사용하여 store 공급하기 useSelector, useDispatch 사용법 1. react-redux 설치 우선 Provider를 사용하기 위해서 아래의 명령어를 실행하여 react-redux를 설치한다. npm install react-redux --save 2. Provider를 사용하여 store 공급하기 // index.tsx import React from 'react..

이번 포스팅에서는 리덕스에서 여러개의 reducer를 사용해야 할때 활용할 수 있는 combineReducers에 관해 간단하게 정리하는 포스팅이다. 목차 combineReducers 사용이유 combineReducers 사용법 1. combineReducers 사용이유 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { createStore } from 'redux'; import rootReducer from './reducers'; const root = ReactDOM.createRoot(document.getElementById..

이번 포스팅에서는 Redux란 무엇이고 코드 예시를 통해 사용방법에 대해 포스팅해보려한다. 목차 Redux 란? Context와 차이점 Redux 설치 및 사용 방법 1. Redux 란 ? 리덕스는 상태 관리 라이브러리로서 자바스크립트 기반의 웹 어플리케이션에서 데이터의 상태를 효율적으로 관리하기 위해 사용한다. 보통 React와 함께 사용되는 것이 일반적이지만 Angular, Vue.js 등 다른 자바스크립트 프레임워크와도 함께 사용이 가능하다. 간단하게 요약해서 app 내에서 사용되는 데이터의 상태(State)를 Store라는 하나의 저장소에서 관리하고 필요에 따라 Dipatch로 Action을 Reducer에게 전달하여 상태의 값을 변경하고 변경된 상태의 값을 컴포넌트로 전달해주는 역할을 한다. 즉..