JavaScript73 [ReactJS_Complete] Using Redux 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React Redux 사용법 1. createSlice 선언 : initialState, reducer 함수의 객체, slice의 이름을 받아서 reducer와 state에 해당하는 action 생성자와 action type을 자동으로 생성하는 함수 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import { createSlice } from "@reduxjs/toolkit"; const uiSlice = createSlice({ name: 'ui', initialState: {cartI.. 2023. 6. 4. [해결 방법] TypeError: _store_ui_slice__WEBPACK_IMPORTED_MODULE_1__.default.toggle is not a function ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import classes from './CartButton.module.css'; import uiActions from '../../store/ui-slice' import { useDispatch } from 'react-redux'; const CartButton = (props) => { const dispatch = useDispatch(); const toggleCartHandler = () => { dispatch(uiActions.toggle().. 2023. 6. 4. [해결 방법] "reduxjs": Unknown word. cSpell ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 import { createSlice } from "@reduxjs/toolkit"; 🚨 다음과 같은 경고 발생 "reduxjs": Unknown word.cSpell 발생 원인 VS Code 확장자 중 'Code Spell Checker'에서 reduxjs를 오타로 인식 해결 방법 Quick fix → Add "reduxjs" to workspace settings → (자동) .vscode 폴더/settings.json 생성 1 2 3 4 5 6 { "cSpell.words": [ "reduxjs" ] } 참고 자료 vscode 확장 Code Spel.. 2023. 6. 4. [ReactJS_Complete] Redux toolKit: createSlice 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React Redux toolKit 사용하기 1. Redux toolKit 설치 1 2 npm install @reduxjs/toolkit 2. createSlice import 및 선언 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 import {createSlice} from '@reduxjs/toolkit'; const initialState = {counter: 0, showCounter: true}; const counterSlice = cre.. 2023. 6. 4. [ReactJS_Complete] useSelector, useDispatch 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React useSelector(state => state.module) : 저장소에 등록된 데이터(상태, State)를 가져와서 쓸 수 있는 Hook : Redux 스토어의 상태 객체를 매개변수로 받고, 그 상태에서 필요한 값을 선택적으로 반환 즉, Redux 상태 객체에서 counter 속성을 선택하여 반환 * useSelector 사용 시, react-redux는 해당 컴포넌트를 저장소에 자동으로 구독 설정 즉, 저장소 데이터가 변경될 경우에 자동으로 최신 카운터를 전달 받음 useDispatch() : R.. 2023. 6. 4. [해결 방법] export 'default' (imported as 'redux') was not found in 'redux' ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import redux 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 = r.. 2023. 6. 4. 이전 1 2 3 4 5 6 7 ··· 13 다음
