728x90 728x90 redux4 Redux - 리엑트 컴포넌트 안에서 리덕스 데이터 사용 - src > component > counter.js import { useSelector } from 'react-redux'; import classes from './Counter.module.css'; const Counter = () => { const counter = useSelector(state => state.counter); const toggleCounterHandler = () => {}; return ( Redux Counter {counter} Toggle Counter ); }; export default Counter; 2023. 7. 10. Redux 시작 환경 npm install redux react-redux --save; src 폴더 안에 component 와 store 폴더 만들기 그 안에 index.js 파일 만들기 import { legacy_createStore as createStore } from 'redux'; const counterReducer = (state = { counter: 0}, action) => { if(action.type === 'increment'){ return { counter: state.counter + 1, }; } if(action.type === 'decrement'){ return { counter: state.counter - 1, }; } return state; }; const store = crea.. 2023. 7. 10. 핵심 리덕스 개념 - 리덕스 설치 - npm install redux --save - 리덕스 사용법 const redux = require('redux'); //redux import const counterReducer = (state = { counter: 0 } , action) => { if (action.type === 'increment') { return { counter: state.counter + 1; }; } if (action.type === 'decrement') { return { counter: state.counter - 1; }; } return state; }; //reducer 생성 (Inputs: Old State + Dispatched Action, Output: New State O.. 2023. 7. 10. Redux란? - 리덕스는 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템 - Local State = 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태 - Cross-Component State = 하나가 아닌 다수의 컴포넌트에 영향을 미치는 상태 - 다른 컴포넌트에 상태를 넘길려면 prop 체인을 구축해야 하는데 이를 prop drilling 이라함 - App-Wide State = 컴포넌트 전체에 영향을 미치는 상태 ex) 사용자 인증 - 리엑트 컨텍스트를 쓰면 드릴링을 안해줘도 됨 - 단점으로 복잡해지고 코드가 복잡해짐 (중첩) - 성능 = 데이터가 자주 변경될때 부적합 - 리덕스 작동 방식 - 중앙 한개의 저장소에 전체 애플리케이션의 모든 상태를 저장 - 컴포넌트가 저장소를.. 2023. 7. 10. 이전 1 다음 728x90 728x90