React에서는 **싱글 페이지 애플리케이션(SPA, Single Page Application)**을 만들기 때문에 페이지를 이동할 때 전체 페이지를 새로고침하지 않고 **클라이언트 측 라우팅(Client-side Routing)**을 사용한다이를 위해 React Router 라이브러리를 활용함React Router란?React Router는 URL을 기반으로 컴포넌트를 동적으로 렌더링할 수 있도록 도와주는 라이브러리주요 기능:페이지 이동(Route)링크 이동(Link, NavLink)파라미터 및 쿼리 스트링 처리중첩 라우팅(Nested Routing)리디렉션(Redirect)설치 방법:npm install react-router-domRoute를 이용한 페이지 이동Route는 특정 URL 경로에 따라..

React Context API란?React Context API는 전역 상태를 쉽게 관리할 수 있도록 도와주는 기능입니다. 기존에는 props를 통해 부모 → 자식으로 데이터를 전달했지만, Context API를 사용하면 여러 컴포넌트에서 직접 데이터를 공유할 수있다.1.기존 상태 관리 문제 (Props Drilling)React에서는 일반적으로 부모에서 자식으로 props를 통해 데이터를 전달합니다. 하지만, 컴포넌트가 깊어지면 중간 단계에서 필요 없는 컴포넌트까지 props를 전달해야 하는 문제가 발생합니다. 이를 **"Props Drilling"**이라고 합니다. const App = () => {const user = { name: "John Doe", age: 30}; return ; }; c..

SPA란 Single Page Application의 약자로, 사용자가 웹 애플리케이션을 이용할 때 페이지 전체를 새로 로드하지 않고 필요한 데이터나 UI만 동적으로 변경하는 웹 애플리케이션입니다.💡 특징단일 HTML 페이지최초 로드 시 하나의 HTML 페이지 (index.html)를 서버에서 받아오고 이후부터는 필요 데이터만 비동기로 요청빠른 화면 전환페이지 전환 속도가 빠름(전체 리로드가 없으므로).클라이언트 사이드 라우팅URL이 바뀌어도 전체 페이지가 새로고침되지 않으며, 필요한 컴포넌트만 동적으로 렌더링API 중심 구조서버는 주로 JSON 데이터를 RESTful API나 GraphQL로 제공🖥 동작 방식초기 로드사용자가 웹 앱에 처음 접속하면 index.html, JavaScript 번들, C..

React 기초 문법 가이드React는 컴포넌트 기반 UI 라이브러리로, 효율적으로 사용자 인터페이스를 구성하기 위해 사용되며. JSX 문법과 컴포넌트 개념이 핵심1. JSX 문법React는 JavaScript와 HTML을 결합한 JSX (JavaScript XML) 문법을 사용function App() { return Hello, React!; }JSX 특징HTML과 유사하지만 JavaScript 코드로 변환가능중괄호 {}로 JavaScript 표현식을 사용가능const name = 'Nell'; const age = 25; function App() { return {name}는 {age}살입니다.;}2. 컴포넌트 (Components)(1) 함수형 컴포넌트function Greeting() { re..

ReportWebVitals?**reportWebVitals**는 React 프로젝트에서 웹 성능 데이터를 수집하는 함수입니다.React 공식 템플릿 (Create React App)으로 프로젝트를 생성하면 기본적으로 포함되어 있다,이 함수는 Web Vitals 메트릭(웹 성능 지표)을 기록하거나 분석 도구로 전송하는 데 사용됩니다.Web Vitals 메트릭메트릭설명FCPFirst Contentful Paint - 첫 번째 콘텐츠가 렌더링되는 시간LCPLargest Contentful Paint - 가장 큰 콘텐츠가 렌더링되는 시간CLSCumulative Layout Shift - 레이아웃 불안정성FIDFirst Input Delay - 첫 사용자 입력에 대한 응답 시간TTFBTime to First B..