JavaScript73 [ReactJS_Complete] How Redux Works 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. 🟨 기본 환경: IDE: VS code, Language: JavaScript Redux 작동 방식 Redux: Application 내부의 하나의 중앙 데이터(=상태, state) 저장소 Component: Redux를 구독하여 데어터가 변경될 때마다 필요한 데이터를 전달 받음 Reducer Function: 저장소의 데이터 변경(≠useReducer) - Input: Old State, Dispatched Action - Output: New State Object Action: 버튼 클릭 등 이벤트의 발생 - Component에서 일어나며(=Trigger) Reduc.. 2023. 6. 4. [해결 방법] TypeError: Cannot read properties of undefined (reading 'counter') 🟨 기본 환경: IDE: VS code, Language: JavaScript 발생 Error JavaScript에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 const redux = require('redux'); const counterReducer = (state, action) => { return { counter: state.counter + 1 }; }; const store = redux.createStore(counterReducer); const counterSubscriber = () => { const latestState = store.getState(); console.log(latestState); }.. 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. [ReactJS_Complete] React.createContext() 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React React.createContext() : 컴포넌트에게 props를 사용하지 않고 필요한 데이터를 넘겨주며 사용할 수 있게 해 줌으로써 컴포넌트들이 데이터(state)를 더 쉽게 공유할 수 있도록 함 React.createContext() 사용법 1. React createContext() 선언 1 2 3 4 5 6 7 8 9 import React from 'react'; const AuthContext = React.createContext({ isLoggedIn: false }); // AuthC.. 2023. 6. 3. 이전 1 2 3 4 5 6 7 8 ··· 13 다음
