JavaScript73 [ReactJS_etc] Difference between state and variable 이 글은 코딩알려주는누나의 [리액트 초보자 입문강의 3탄]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: replit, Language: React * replit: Browser 기반 IDE 🚨 화면단에 보여지는 요소들을 매번 업데이트할 경우, 비용과 시간이 많이 발생하는 문제를 해결하기 위해 variable 대신 state 사용 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import React, {useState} from 'react'; import './App.css' export default function App() { let count1 = 0; const [count2, setCount2] = useState(0); co.. 2023. 6. 6. [해결 방법] Error: Cannot find module 'C:\Users\user\Desktop\REACT\redux\productReducer.js' 🟨 기본 환경: IDE: VS code, Language: JavaScript 발생 Error CMD에서 node productSlice.js로 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 const { createSlice } = require('@reduxjs/toolkit'); // createSlice: reducer 생성, 매개변수-객체 let initialState = { productList: [], selectedItem: null, }; // name: unique한 action name을 만드는데 쓰이는 prefix // initialState:.. 2023. 6. 6. [해결 방법] SyntaxError: Cannot use import statement outside a module 🟨 기본 환경: IDE: VS code, Language: JavaScript 발생 Error CMD에서 node productSlice.js로 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 import {createSlice} from '@reduxjs/toolkit'; // createSlice: reducer 생성, 매개변수-객체 let initialState = { productList: [], selectedItem: null, }; // name: unique한 action name을 만드는데 쓰이는 prefix // initialState: reduce.. 2023. 6. 6. [해결 방법] Expected an assignment or function call and instead saw an expression ⚛️ 기본 환경: 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 import { createSlice } from '@reduxjs/toolkit'; import React from 'react'; const initialState = {count: 0}; const countSlice = createSlice({ name: 'count', initialState, reducers: { increment(state) {state.count + 1}, }, }); export default countSlice; 🚨 다음과 같은 오류 발생 Expected an.. 2023. 6. 5. [해결 방법] could not find react-redux context value; ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); reportWebVitals(); 🚨 다음과 같은 오류 발생 .. 2023. 6. 5. [해결 방법] Actions must be plain objects. Use custom middleware for async actions. ⚛️ 기본 환경: 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 23 24 25 26 27 28 29 30 31 import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { cat, chick, dog, tiger } from '../../store/modules/animal'; const Animal = () => { const name = useSelector(state => state.animal.name); // a.. 2023. 6. 5. 이전 1 2 3 4 5 6 ··· 13 다음
