React 기초 개념과 동작 방식: 만들어 보면서 이해하는 프론트엔드 개발

🛠 개요

이번 포스트에서는 React의 기본 개념과 동작 방식을 이해하고, 우리가 만든 프로젝트에서 React가 어떻게 작동하는지 설명합니다.

React는 SPA(Single Page Application) 방식을 사용하며, 컴포넌트 기반 개발을 통해 유지보수가 쉽고 효율적인 UI를 구축할 수 있습니다.

이제 React의 핵심 개념과 동작 흐름을 살펴보겠습니다. 🚀

---

 

1. React란 무엇인가?

📌 React의 정의

React는 Facebook(현 Meta)에서 개발한 JavaScript 라이브러리로, 빠르고 효율적인 UI를 만들기 위해 설계되었습니다.

📌 기존 방식 vs React 방식 비교

기존 방식(전통적인 웹 개발) React 방식

페이지가 변경될 때마다 서버에서 HTML을 새로 받아옴	최초 로딩 후, 필요한 부분만 업데이트
DOM을 직접 조작하여 UI 변경 (속도 느림)	Virtual DOM을 사용하여 변경된 부분만 렌더링 (속도 빠름)
복잡한 UI를 만들기 어려움	컴포넌트 기반으로 재사용 가능

예제: 우리가 만든 /tools/meta-cleaner 페이지 이동 시, 새로고침 없이 화면이 업데이트되는 것이 React의 특징입니다.

 

2. React의 핵심 개념

1. Single Page Application (SPA)

React는 한 번의 HTML 로딩 이후, 필요한 부분만 변경하는 방식(SPA)으로 동작합니다.

• 전통적인 방식: 페이지 이동 시 새로고침 발생 → 속도 느림
• React 방식: 페이지 이동 시 필요한 컴포넌트만 업데이트 → 속도 빠름

2. 컴포넌트 기반 개발

React에서는 UI를 "컴포넌트" 단위로 나누어 개발합니다.

📌 예제: 우리가 만든 파일 구조

frontend/
├── components/      # 공통 UI 컴포넌트
│   ├── Navbar.jsx  # 상단 네비게이션 바
├── pages/           # 개별 페이지
│   ├── MetaCleaner.jsx  # 메타 태그 삭제 UI
├── App.jsx          # 전체 라우팅 관리
└── main.jsx         # React 루트 엔트리

예제: Navbar.jsx는 네비게이션을 담당하고, MetaCleaner.jsx는 메타 태그 삭제 기능을 담당하는 독립적인 컴포넌트입니다.

3. Virtual DOM과 상태(State) 관리

React는 **Virtual DOM(가상 DOM)**을 사용하여 변경된 부분만 업데이트합니다.

• 기존 방식: 브라우저가 모든 요소를 다시 그려야 해서 속도가 느림
• React 방식: 변경된 부분만 Virtual DOM에서 비교 후 실제 DOM에 반영 → 성능 향상

📌 예제: React에서 상태(State) 관리

const [files, setFiles] = useState([]);

✅ 파일이 업로드되면, useState가 새로운 값을 저장하고 화면을 자동으로 업데이트합니다.

4. Props를 이용한 데이터 전달

• 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 props를 사용합니다.

📌 예제: App.jsx에서 Navbar.jsx 사용

<Navbar />

✅ Navbar.jsx가 App.jsx의 UI 일부로 렌더링됩니다.

---

 

3. React의 동작 흐름

React가 실행되는 과정은 다음과 같습니다. 🚀

1. 브라우저가 index.html을 로드

• public/index.html이 실행되지만, React가 직접 조작하면서 동작합니다.

2. main.jsx에서 React 앱을 실행

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

✅ React가 index.html의 <div id="root"></div>에 App.jsx를 주입합니다.

3. App.jsx에서 페이지 라우팅 관리

<Router>
  <Navbar />
  <Routes>
    <Route path="/tools/meta-cleaner" element={<MetaCleaner />} />
  </Routes>
</Router>

✅ Navbar.jsx가 네비게이션을 담당하고, MetaCleaner.jsx가 특정 페이지를 담당합니다.

4. MetaCleaner.jsx에서 UI를 렌더링

const [files, setFiles] = useState([]);

✅ 파일을 업로드하면 useState가 데이터를 저장하고, React가 자동으로 화면을 업데이트합니다.

---

 

4. 우리가 만든 프로젝트의 React 동작 흐름

✅ (1) 사용자가 http://localhost:5173/에 접속하면 → App.jsx가 실행됨
✅ (2) App.jsx가 Navbar.jsx를 불러와 메뉴를 표시함
✅ (3) /tools/meta-cleaner로 이동하면 MetaCleaner.jsx가 실행됨
✅ (4) MetaCleaner.jsx에서 파일 업로드하면, useState가 상태를 업데이트하고 화면을 변경함

 

한눈에 보는 React 개념 정리

SPA (Single Page Application)	한 번 로드 후 필요한 부분만 변경	/tools/meta-cleaner 이동 시 새로고침 없음
컴포넌트 기반 개발	UI를 작은 조각으로 나눠 개발	Navbar.jsx, MetaCleaner.jsx
Virtual DOM	변경된 부분만 업데이트하는 방식	useState()로 상태 변경 시 화면 업데이트
State (상태 관리)	컴포넌트 내에서 변경 가능한 데이터 저장	useState([])
Props (속성 전달)	부모 → 자식 컴포넌트로 데이터 전달	<Navbar />
라우팅 (페이지 이동 관리)	여러 개의 페이지를 관리하는 기능	react-router-dom 사용
렌더링	React가 UI를 생성하는 과정	ReactDOM.createRoot().render(<App />)

---

 

🚀  React의 핵심 포인트

✅ React는 SPA(Single Page Application) 방식으로 동작하며, 화면을 빠르게 업데이트할 수 있다.
✅ 컴포넌트 기반 개발을 통해 재사용성과 유지보수성을 높일 수 있다.
✅ Virtual DOM을 사용해 변경된 부분만 업데이트하여 성능을 최적화한다.
✅ React Router를 활용해 여러 개의 페이지를 손쉽게 관리할 수 있다.

 

 

이전 포스팅을 작성을 하고 조금 더 React에 대해 설명이 필요 할 것 같아서 만든 프로젝트를 예시로 설명을 해 보았습니다. 

Vite React 활용한 이미지 업로드 UI 개발