JavaScript/React with Error18 [해결 방법] 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. [해결 방법] 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. [해결 방법] React Hook "useState" cannot be called inside a callback 2 ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 const submitHandler = (event) => { event.preventDefault(); if(formIsValid){ authCtx.onLogin(emailState.value, pwdState.value); } else if(!emailIsValid) { emailInputRef.current.activate(); } else { pwdInputRef.current.activate(); } }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23.. 2023. 6. 3. [해결 방법] React Hook "useState" cannot be called inside a callback ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 useEffect(() => { useState(); console.log('EFFECT RUNNING'); return () => { console.log('EFFECT CLEANUP'); }; }, []); 🚨 다음과 같은 오류 발생 React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function 발생 원인 use로 시작하는 .. 2023. 6. 3. [해결 방법] React Hook "useState" is called in function "emailReducer" that is neither a React function component nor a custom React Hook function ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 12 13 const emailReducer = (state, action) => { useState(); if(action.type === 'USER_INPUT'){ return {value : action.value, isValid: action.value.includes('@')}; } if(action.type === 'INPUT_BLUR'){ return {value : state.value, isValid: state.value.includes('@')}; } return {value: '', isValid:.. 2023. 6. 3. 이전 1 2 3 다음
