2025-11-12(React -final)

React 핵심 개념 정리

컴포넌트(component), 라우팅(Routing), 속성(Props)

.

npm install 대신에 npm i만 해도 노드모듈은 올리지 말기(용량이 크기떄문에)src는정적 파일 저장하는곳
프런트를 편하게 만드는 api = 라이브러리

 

컴포넌트 (Component)

리액트 앱의 가장 기본 단위이며, 화면을 구성하는 "부품" 역할을 한다.
하나의 컴포넌트 하나의 HTML 구조만 리턴해야 하며,,,
여러 컴포넌트를 조립해서 하나의 페이지 (App)를 만든다.

핵심 개념

컴포넌트	리액트 앱을 구성하는 최소 단위 (화면의 한 조각)
루트 컴포넌트	최상위 컴포넌트 → App.jsx
자식 컴포넌트	다른 컴포넌트 내부에서 사용되는 컴포넌트
이름 규칙	반드시 대문자로 시작 (파스칼 표기법)
리턴 규칙	반드시 하나의 요소만 리턴 가능
형태	함수형(Function) 컴포넌트 / 클래스형(Class) 컴포넌트

// Header.jsx
function Header() {
  return <h1>헤더 영역입니다</h1>;
}

export default Header;

// App.jsx
import Header from './Header';

function App() {
  return (
    <div>
      <Header /> {/* 자식 컴포넌트 */}
      <p>메인 콘텐츠 영역</p>
    </div>
  );
}

export default App;

App은 루트 컴포넌트, Header는 자식 컴포넌트

라우팅 (Routing)

라우팅은 주소(path)에 따라 다른 페이지(컴포넌트)를 화면에 렌더링 하는 것.

리액트는 한 페이지에서 동적으로 컴포넌트를 교체하는 방식으로
화면 이동을 구현한다.(-> 실제로는 페이지 전체가 새로고침되지 않음)

라우팅을 위한 설치

npm install react-router-dom

main.jsx에서 <App/>컴포넌트<BrowserRouter>로 감싸준다.

BrowserRouter

: 브라우저의 주소 변화를 감지하고, 그에 맞는 페이지를 렌더링함
(라우팅의 핵심 엔진 역할)

import "./App.css";
import { Routes, Route, Navigate } from "react-router-dom";
import Read from "./pages/Read";
import Home from "./pages/Home";
import List from "./pages/List";
import Update from "./pages/Update";
import Write from "./pages/Write";
import HeaderMenu from "./components/header/HeaderMenu";
import Login from "./pages/Login";

function App() {
  return (
    <div>
      <h1>라우팅연습</h1>
      <HeaderMenu />
      {
        //path가 바뀌면 보여줄 컴포넌트를 등록
      }
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/write" element={<Write />} />
        <Route path="/read" element={<Read />} />
        <Route path="/list" element={<List />} />
        <Route path="/update" element={<Update />} />
        <Route path="/login" element={<Login />} />

        {/* 이외의 path로 요청하면 ETC 컴포넌트 실행 */}
        {/* <Route path="*" element={<ETC />} /> */}

        {/* 이외의 path로 요청하면 기존의 등록한/에 해당하는 컴포넌트를 대체해서 실행 
        다른 페이지로 즉시 이동 - 리다이렉션*/}

        <Route path="*" element={<Navigate replace to="/" />} />
      </Routes>
    </div>
  );
}

export default App;

라우팅 기본 구조

이 App 컴포넌트는 리액트 앱 전체의 라우팅 중심 구조(Router Root) 역할을 함
사용자가 브라우저 주소창에 입력하는 URL(경로)에 따라
어떤 페이지 컴포넌트를 렌더링할지 결정해주는 컨트롤러 역할

<Routes>

• 라우트(Route)들의 컨테이너(묶음) 역할
• 여러 개의 <Route>를 안에 넣어서 각각의 path 규칙을 등록함.

<Route>

• 각 경로(path) 와 보여줄 컴포넌트(element) 를 연결시켜주는 설정

속성설명

path	브라우저 주소창에 입력되는 URL 경로
element	path와 일치할 때 화면에 렌더링될 컴포넌트

<Route path="/write" element={<Write />} />

-> /write 로 이동하면 Write.jsx가 화면에 표시가 됨

<Navigate />

• 사용자가 등록되지 않은 경로(path="*")로 접근했을 때
  → 특정 페이지로 리다이렉션(redirect) 시켜주는 역할.

<Route path="*" element={<Navigate replace to="/" />} />

• path="*" → 위에 등록되지 않은 모든 URL (404 역할)
• replace → 기존 히스토리(뒤로가기 기록)에 남기지 않음
• to="/" → 홈("/")으로 자동 이동

// pages/Home.jsx
export default function Home() {
  return <h2>홈 페이지</h2>;
}

// pages/Login.jsx
export default function Login() {
  return <h2>로그인 페이지</h2>;
}

렌더링 방식 비교

구분                        이름                                      설명

SSR	Server Side Rendering	서버에서 페이지 HTML을 만들어서 보냄
CSR	Client Side Rendering	브라우저에서 JS로 화면을 동적으로 그림 (React 기본)

Props(속성, Properties)

Props는

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법

리액트는 단방향 데이터 흐름(one-way data flow)을 사용하기 때문에,
데이터는 항상 위(부모)에서 아래(자식)로 전달된다.

정리 포인트

구분                                                     설명

역할	부모 → 자식으로 데이터 전달
전달 방식	<자식컴포넌트 속성명="값" />
받는 방식	자식에서 props.속성명 사용
자료형	객체(Object) 형태로 전달됨
데이터 흐름	단방향 (부모 → 자식)

 

// Child.jsx
function Child(props) {
  return (
    <div>
      <h3>안녕하세요, {props.name}님!</h3>
      <p>당신의 나이는 {props.age}살입니다.</p>
    </div>
  );
}

export default Child;

// App.jsx
import Child from './Child';

function App() {
  return (
    <div>
      <Child name="우희" age="25" />
      <Child name="경신" age="27" />
    </div>
  );
}

export default App;