일본취업생활IT정보

✅ import AppRoutes from './AppRoutes.tsx' vs import { AppRoutes } from './AppRoutes.tsx' 차이점이 두 가지 import 방식의 차이는 모듈이 default export인지 named export인지에 따라 달라집니다.📌 1. import AppRoutes from './AppRoutes.tsx' → default export 사용이 방식은 AppRoutes.tsx에서 export default로 내보낸 경우에 사용합니다.🔹 AppRoutes.tsx (default export 사용)import { Routes, Route } from 'react-router-dom';import HomePage from './pages/HomePa..

1. React Router 설치React Router는 리액트에서 페이지 이동을 쉽게 할 수 있도록 도와주는 라이브러리입니다.npm install react-router-dom2. React Router 설정App.js에서 라우터를 설정해줘야 합니다.import { BrowserRouter as Router, Routes, Route, useNavigate } from "react-router-dom";// 페이지 컴포넌트function HomePage() { return 홈 페이지;}function AboutPage() { return 소개 페이지;}// 버튼 컴포넌트 (클릭 시 페이지 이동)export function MyButton() { const navigate = useNavigate(..

1. 리액트 기본 개념과 구조리액트에서 웹 애플리케이션을 만들 때 가장 중요한 요소는 컴포넌트(Component)입니다.컴포넌트는 쉽게 말해 웹 페이지의 특정 부분을 담당하는 조각입니다.📌 리액트 프로젝트 기본 구조my-app/├── node_modules/       # 설치된 라이브러리├── public/             # 정적 파일 (index.html 포함)├── src/                # 소스 코드 (리액트 컴포넌트들)│   ├── App.js          # 메인 컴포넌트│   ├── index.js        # 프로젝트의 진입점│   ├── components/     # 컴포넌트 모음 (별도로 분리 가능)├── package.json        # 프로젝트 설..