JavaScript73 [해결 방법] TypeError: Cannot read properties of undefined (reading 'isLoggedIn') ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 return ( {!isLoggedIn && } {isLoggedIn && } ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 const Navigation = (props) => { return ( {(ctx) => { return ( {ctx.isLoggedIn && ( Users )} ); }} ); }; 🚨 다음과 같은 오류 발생 TypeError: Cannot read properties of undefined (reading 'isLoggedIn') 발생 원인 Rea.. 2023. 6. 3. [ReactJS_Complete] React.useReducer() 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React React.useReducer() : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 : 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있음 useReducer() 의 사용법 1 2 const [state, dispatch] = useReducer(reducer, initialState); - state: 컴포넌트에서 사용 할 수 있는 상태 - dispatch: 액션을 발생시키는 함수 ▶ 예: dispatch({ type: 'INCREMENT' }) - reduce.. 2023. 6. 3. [ReactJS_Complete] React.useEffect() 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React React.useEffect() : 모든 컴포넌트가 렌더링된 이후 특정 작업을 실행시켜주는 Hook : HTTP request, Browser 저장소에 저장 등 sideEffect를 처리 * useEffect(function, dependencies) - function: 수행하고자하는 작업 - dependencies: 의존성 배열, 업데이트를 의존시키고 싶은 값 설정 1. useEffect(function) : Rendering시마다 실행 2. useEffect(function, []) : Compo.. 2023. 6. 3. [ReactJS_Complete] React.useRef() 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React React.useRef() : .current프로퍼티에 변경 가능한 값을 담고 있는 상자와 유사 * 특정 DOM 선택 시 사용 = JavaScript에서의 특정 DOM 을 선택하는 getElementById, querySelector 같은 DOM Selector 함수와 같은 역할 * Rerendering 방지 = useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않음 useRef() 설정 1. useRef import 1 2 import React, { useState, useR.. 2023. 6. 1. [ReactJS_Complete] ReactDOM.createPortal() 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React ReactDOM.createPortal() : 렌더링하려는 HTML 요소를 다른 장소로 이동 ⭐ Modal 창 등을 root Component와 구분하여 관리 사용 방법 1. ReactDOM import 1 2 import ReactDOM from "react-dom"; react-dom: React의 기능을 Web browser에서 사용하기 위해 import = 웹브라우저에 대한 React용 어뎁터의 일종 2. 이동하고자하는 Component 선언 1 2 3 4 const Backdrop = (pro.. 2023. 6. 1. [ReactJS_Complete] <div> Soup 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React JSX에서 return 값은 1개만 가능하므로 여러 요소들이 return될 때, 1개의 tag로 감싸거나 배열을 선언해야 함(참고) ⭐ 배열 선언보다는 를 통해서 1개의 return값을 만듦 🚨 JSX 요구사항에 따른 다수의 선언에 따른 불필요한 생성 ▶ tag styling에 좋지 않 ▶ 다수의 html 요소 rendering에 따른 페이지 로딩 속도 저하 Soup 해결 방법 1. Wrapper.js 생성 1 2 3 4 5 6 const Wrapper = (props) => { return props.. 2023. 6. 1. 이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음
