코딩연습장

24.07.02 redux로 counter기능 구현하기

//App.js 더하기 빼기먼저 App.js를 다음과 같이 설정한다.input에 숫자를 입력하고 더하기 버튼을 누르면 더해지고, 빼기버튼을 누르면 빼지는 기능을 구현할 것이다.// src/App.jsimport React, { useState } from 'react';import { useDispatch, useSelector } from 'react-redux';import { addNumber } from './redux/modules/counter';const App = () => { const dispatch = useDispatch(); const [number, setNumber] = useState(0); //store에서 state의 counter모듈에서..

// src/App.jsimport React from 'react';import { useSelector, useDispatch } from 'react-redux'; // import 해주세요.const App = () => { const dispatch = useDispatch(); const number = useSelector((state) => state.counter.number); return ( { dispatch({ type: 'PLUS_ONE' }); }} > +1 { ..

1. 리덕스 라이브러리 설치yarn add redux react-reduxredux와 react-redux 라이브러리 두개를 한번에 설치한다. 2. 모듈, 스토어를 분리해둘 폴더를 생성한다. 3. 스토어 파일을 작성한다.//configStore.jsimport { createStore } from 'redux';import { combineReducers } from 'redux';const rootReducer = combineReducers({});const store = createStore(rootReducer);export default store;1. createStore() 리덕스의 가장 핵심이 되는 스토어를 만드는 메소드이다. 리덕스는 단일 스토어로 모든 상태 트리를 관리하며, 리덕스를 사..