분류 전체보기170 [React] React 가이드(동작 원리 및 엔진) 1. React란 무엇인가?React는 Facebook(Meta)에서 개발한 "JavaScript 라이브러리"로, UI(User Interface) 구축을 위한 컴포넌트 기반의 프레임워크입니다. React의 핵심 목표는 빠르고 효율적인 UI 렌더링이며, 이를 위해 Virtual DOM과 선택적 렌더링(Reconciliation) 기법을 사용합니다. 2. React의 동작 원리React의 주요 동작 방식 =>2.1 Virtual DOMReact는 Virtual DOM(가상 DOM) 을 사용하여 실제 DOM 조작을 최소화합니다. Virtual DOM은 메모리 내에서 UI의 가상 트리를 유지하며, 변경 사항이 감지되면 최소한의 실제 DOM 업데이트만 수행합니다.2.2 Reconciliation (조정 과정)상.. 2025. 3. 10. [React] React 상태 관리 Hook 정리 1. useStateuseState는 가장 기본적인 상태 관리 Hook으로, 컴포넌트 내에서 상태를 저장하고 업데이트하는 데 사용됩니다.import { useState } from "react";const MemoPad = () => { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>카운트 );};export default MemoPad;2. useEffectuseEffect는 컴포넌트가 렌더링될 때 특정 로직을 실행하고자 할 때 사용됩니다. 예를 들면 API 호출, 구독(subscription), DOM 업데이트 등의 작업이 가능합니다.import { useSt.. 2025. 3. 4. [트러블 슈팅]vscode에서 npm install, npm dev run 명령어가 되지 않을시? 어쩌다 제목같은 상황에 놓이게 되었나?오랜만에 안쓰는 노트북의 vscode 명령어를 실행을 해보았습니다.그런데 다음과 같은 명령어가 출력되다 보니 무언가 손상을 입어서 node.js를 재설치하기로 마음먹었습니다.그리고 재설치를 할 경우에는 반드시 1. 제어판의 프로그램 및 기능추가에서 nodejs를 검색하여 제거2. nodejs 파일목록내에 package.json과 node_module파일을 제거Path 환경변수 추가는 기본(why? 그리하여야 PC시스템이 인식할 수 있기 때문) 그러면 vscode 터미널에서 npm 관련 명령어를 실행하다보면 밑에와 같이 메시지가 출력됨을 볼 수 있습니다.위와 같은 오류메시지가 출력될시 시도해볼 수 있는 경우가 있습니다.PowerShell의 보안 정책 때문에 npm명령어.. 2025. 3. 3. [TypeScript]React 개발 프로젝트에서 BrowserRouter를 사용했을 때 화면이 정상적으로 렌더링되지 않는 경우 + Vite(트러블 슈팅) 원인 : React로 프로젝트를 개발하다 보면, BrowserRouter를 사용했을 때 화면이 정상적으로 렌더링되지 않는 경우가 있습니다. 하지만 HashRouter로 변경하면 문제없이 동작하는데 그 이유를 알아보자. BrowserRouter 를 사용하면 화면이 안 나오는 이유 BrowserRouter는 history API를 활용하기 때문에, 사용자가 새로고침을 하면 문제가 발생할 수 있습니다.일반적으로 React 애플리케이션은 단일 HTML 파일(index.html)을 기반으로 동작합니다. 그런데 BrowserRouter를 사용할 경우, 새로고침을 하면 해당 경로(/about 등)에 대한 요청이 서버로 직접 전달됩니다.이는 개발 서버(Vite, Webpack Dev Server 등)가 해당 URL을.. 2025. 2. 28. 이전 1 ··· 3 4 5 6 7 8 9 ··· 43 다음
