JavaScript73 [해결 방법] Hooks can only be called inside of the body of a function component. ⚛️ 기본 환경: 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 import React from "react"; import { Navigate } from "react-router-dom"; const TempComp = (props) => { const tempHandler = () => { Navigate("/TempPage"); }; return ( Button ); }; export default TempComp; 🚨 다음과 같은 오류 발생 Invalid hook call. Hooks can only be called inside of .. 2023. 6. 25. [ReactJS] Preventing useEffect from running twice with a useRef ⚛️ 기본 환경: IDE: VS code, Language: React useEffect() : 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook useRef() : React 컴포넌트에서 변수를 저장하고 관리하는 데 사용하는 도구 : 컴포넌트의 렌더링과 관련된 값의 변경에 영향을 받지 않음 useEffect() 내부에서 useState를 활용한 setState를 할 경우, 1. mount될 때 1번 2. state변경될 때 1번 총 2번(mount 1번 + 렌더링 1번)의 useEffect가 호출됨 이 때, Ref를 선언하고 isEffectedRef.current를 활용하여 변수의 현재 값을 가져와 false일 때만 useEffect가 실행되도록 제어할 수 있음 1 2 3.. 2023. 6. 19. [해결 방법] TypeError: props.forEach is not a function 🟨 기본 환경: IDE: VS code, Language: JavaScript 발생 Error JavaScript에서 다음 Source Code를 실행할 경우, 1 2 props.forEach(console.log(props.movieImg.length)); 🚨 다음과 같은 Error 발생 props.forEach is not a function TypeError: props.forEach is not a function 발생 원인 forEach()의 매개변수를 함수가 아닌 배열의 개별 인자를 전달 해결 방법 콜백 함수를 사용하여 배열의 각 요소를 반복 처리 1 2 3 4 props.forEach((data) => { console.log(data.movieImg.length); }); * callbac.. 2023. 6. 11. [해결 방법] Parsing error: Unexpected reserved word 'await' ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 function addMovieHandler(movie) { const response = await fetch('https://react-http-e9810-default-rtdb.firebaseio.com/movies.json', { method: 'POSt', body: JSON.stringify(movie), headers: { 'Content-Type': 'application/json' } }); } 🚨 다음과 같은 오류 발생 'await' expressions are only allowed within async.. 2023. 6. 7. [ReactJS_Complete] useEffect, useCallback 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React useEffect() : 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 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 32 33 useEffect(() => { fetchMoviesHandler(); }, [fetchMoviesHandler]); async function fetchMoviesHandler() { setIsLoading(true); setError(n.. 2023. 6. 7. [해결 방법] TypeError: Cannot read properties of undefined (reading 'toFixed') ⚛️ 기본 환경: 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 32 33 34 35 36 37 38 39 import { useDispatch } from "react-redux"; import classes from "./CartItem.module.css"; import { cartActions } from "../../store/cart-slice"; const CartItem = (props) => { const dispatch = useDispatch(); const.. 2023. 6. 7. 이전 1 2 3 4 5 ··· 13 다음
