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..

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..