[KDT] AIaaS 마스터클래스 8주차

학습일지/K-Digital Traing

[KDT] AIaaS 마스터클래스 8주차 - React 학습

tierr 2025. 5. 12. 11:06

1. React 시작하기 및 기본 프로젝트 구조

아래 명령어를 통해 리액트 프로젝트를 빠르게 시작할 수 있다.

npx create-react-app project-name

하위에 project-name이라는 react 프로젝트 폴더가 생성

이렇게 만든 프로젝트를 흔히 CRA (Create React App) 방식이라고 한다.

2. CRA 환경 기본 프로젝트 구조 (npm version: 11.3.0 기준)

project-name/
├── node_modules/              # 설치된 모든 라이브러리 (자동 생성)
├── public/                    # 정적 파일들 (index.html, 아이콘 등)
│   ├── favicon.ico
│   ├── index.html             # React 앱이 붙는 HTML 템플릿
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/                       # 실제 소스코드 작성 위치
│   ├── App.css
│   ├── App.js                 # 메인 컴포넌트
│   ├── App.test.js            # 테스트 파일
│   ├── index.css
│   ├── index.js               # 진입점 (root에 App 렌더링)
│   ├── logo.svg
│   ├── reportWebVitals.js     # 성능 측정용 (선택 사항)
│   └── setupTests.js          # 테스트 환경 설정
├── .gitignore                 # Git에 포함하지 않을 파일 목록
├── package.json               # 프로젝트 메타 정보 및 의존성
├── package-lock.json          # 의존성 버전 고정용
└── README.md                  # CRA 사용 안내 문서

딥다이브) CRA 말고 React 프로젝트를 만드는 다른 방법이 있는가?

CRA는 리액트 프로젝트를 빠르게 시작할 수 있는 공식 툴이었지만, 최근에는 더 빠르고 유연한 도구들이 많아지면서 다양한 방식이 등장했습니다.

✅ CRA 말고 React 프로젝트를 만드는 다른 방법들

방식	특징
Vite	최신 빌드 도구, CRA보다 훨씬 빠름. 설정도 유연함
Next.js	서버 사이드 렌더링(SSR), 파일 기반 라우팅, SEO 지원
Parcel	설정 없는 빠른 번들러. 소규모 프로젝트에 적합
Manual Setup	Webpack, Babel 등 직접 설정 (학습용이나 고급 커스터마이징용)
Remix	서버 중심의 풀스택 React 프레임워크. 라우팅과 데이터 패칭 특화

🔍 간단 비교

기준	CRA	Vite	Next.js
빌드 속도	느림	빠름	보통
설정 유연성	낮음 (eject 해야 가능)	높음	높음
SSR 지원	❌ 없음	❌ 기본 없음	✅ 완전 지원
사용 난이도	쉬움 (초보자용)	쉬움~중간	중간~높음
제작 명령어 예	npx create-react-app	npm create vite@latest	npx create-next-app

🤖💬 : CRA는 여전히 입문자용, 단일 페이지 앱용으로 많이 쓰이고 있지만, Vite는 앞으로의 표준이 될 정도로 대세가 되는 중

3. 기본 리액트 앱 실행

// 리액트 프로젝트 폴더로 이동
cd project-name
// 의존성 설치 : 프로젝트 처음 생성 후 또는 다른 컴퓨터에서 코드를 가져왔을 경우
npm install
// 개발 서버 실행
npm start

🔍 npm이 설치되어 있는데 npm install을 해야하나?

YES. npm이 설치되어 있어도 React 프로젝트를 처음 실행할 때는 npm install을 반드시 해줘야 한다.

npm은 패키지 설치 도구이고, npm install은 해당 프로젝트에서 필요한 라이브러리들을 실제로 설치하는 명령
그래서 npm install을 안 하면 start시에 에러가 발생할 수 있음
다른 사람의 프로젝트를 처음 클론하거나, 처음 만든 CRA 프로젝트는 반드시 npm install 해주기!

상황	설명
npm 설치됨	설치할 수 있는 도구가 준비된 것
npm install 실행	설치할 대상을 실제로 설치함 (예: React, ReactDOM 등)

4. 동작 원리와 이해

npm start 명령어로 기본 프로젝트를 실행해보면, localhost:3000 으로 리액트앱의 실행결과를 확인할 수 있다.

아주 간단한 리액트의 구조를 이해하기 위해 기본 프로젝트를 실행해봤다. 이제 동작구조를 이해해보겠다.

이 프로젝트의 리액트 앱은 크게 아래의 흐름으로 실행된다

index.html (정적 HTML)
   ↓
index.js (ReactDOM이 HTML의 #root에 App 컴포넌트를 주입)
   ↓
App.js (실제 화면 구성 시작점)

💡 보충 설명

CRA에서는 Webpack이 이 파일들을 자동으로 번들링하여 실행함
index.js는 JavaScript 세계와 HTML 세계를 연결하는 브릿지 역할을 한다.

📦 1. public/index.html: HTML 틀

기본 HTML 문서를 의미
브라우저에 보여지는 것은 이 파일이 전부지만, React는 이 안의 <div id="root"></div>에 자신의 UI를 JavaScript로 동적으로 주입한다.

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div> <!-- 🔸 React가 여기에 "끼워넣기" 됨 -->
  </body>
</html>

🧠 2. src/index.js: React 진입점

ReactDOM.createRoot(...)로 index.html의 <div id="root">를 가져오고, 거기에 <App /> 컴포넌트를 렌더링함
즉, App.js는 UI의 최상위 루트 컴포넌트

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

⚛️ 3. src/App.js: 메인 UI 컴포넌트

이 컴포넌트에서 실제로 화면에 보여질 JSX 기반 UI를 작성한다.
필요한 만큼 하위 컴포넌트로 나눌 수 있다.

// src/App.js
function App() {
  return (
    <div className="App">
      <h1>Hello! This is test code</h1>
    </div>
  );
}

export default App;

5. JSX (JavaScript XML)

JavaScript 안에서 HTML 같은 코드를 작성할 수 있게 해주는 문법으로, 거의 React 전용 문법처럼 사용되고 있음

✅ JSX의 특징

특징	설명
HTML과 유사	기존 웹 개발자에게 친숙 <div>안녕</div> 같은 코드를 JS에서 바로 사용 가능
JavaScript 표현식 포함	중괄호 {} 안에 JS 표현식 사용 가능 ({변수}, {조건 && 값}, 삼항연산자 등)
컴파일 필요	Babel이 JSX를 React.createElement() 호출로 변환
반환은 하나의 루트 요소	반드시 하나의 태그로 감싸야 함 (<div>, <></>, 등)

🔍 예시 : JSX는 Babel과 같은 트랜스파일러를 통한 컴파일 필요하다.

const name = "Harry";
const element = <h1>안녕하세요, {name}!</h1>;

→ Babel이 컴파일 단계에서 아래처럼 JavaScript로 변환함:

const element = React.createElement("h1", null, `안녕하세요, ${name}!`);

💡 JSX 문법 규칙 (지켜야 정상 작동함)

JavaScript 표기법 : class 대신에 → className 을 사용
JavaScript 표기법 : for 대신에 → htmlFor 을 사용
태그는 꼭 닫아야 함 (<img />, <br />)
여러 줄일 때 괄호로 감싸기

return (
  <div>
    <h1>Hello</h1>
    <p>React!</p>
  </div>
);

✅ JSX의 장단점

1. 단점

항목	설명
📚 초보자에게 어렵다	JS 안에 HTML, 다시 JS(중괄호 {})가 섞여 있어 처음엔 헷갈림
🧱 로직과 UI의 결합	MVC 패턴에 익숙한 사람에겐 "UI와 로직이 섞여 있다"고 느낄 수 있음
🔄 컴파일 필요	JSX는 브라우저가 직접 이해 못함 → Babel 같은 트랜스파일러 필요
🔁 루트 요소 제한	반환 시 항상 하나의 최상위 요소로 감싸야 함 (예: <div> 또는 <>)
📦 HTML과 100% 동일하지 않음	class → className, for → htmlFor 등 다른 점이 있어 주의 필요

2. 장점

항목	설명
💡 가독성 향상	HTML과 JS가 결합된 형태로 UI 구조를 직관적으로 이해하기 쉬움
🧩 컴포넌트화에 적합	각 UI 조각을 함수처럼 작성하고 재사용 가능
🧠 JavaScript와의 자연스러운 통합	반복, 조건, 변수 삽입 등을 JS 문법으로 처리 가능
🔧 강력한 개발 도구 지원	에디터 자동완성, Lint, 타입 검사 등이 잘 작동함
🛠️ React 생태계와 잘 통합됨	공식 문서, 라이브러리 대부분이 JSX를 기준으로 구성됨

수업) React 주요 개념 조사하고 학습일지 정리하기

1. React JSX 문법과 동작 원리 정리하기

JSX 기본 문법 정리

✔ 태그는 반드시 하나로 감싸야 함

return (
  <div>
    <h1>Hello</h1>
    <p>JSX는 하나의 부모 요소만!</p>
  </div>
);

혹은 <> </>로 Fragment로 감싸도 된다.

✔ JavaScript 표현식은 {} 안에

const name = '정인';
return <h1>안녕하세요, {name}님!</h1>;

✔ class 대신 className 사용

<div className="title">제목</div>

✔ style은 객체 형태로 작성

<div style={{ color: 'blue', fontSize: '20px' }}>Styled</div>

✔ 조건부 렌더링

{isLogin ? <p>환영합니다</p> : <p>로그인 해주세요</p>}

✔ 리스트 렌더링 + key

{items.map(item => <li key={item.id}>{item.name}</li>)}

JSX와 HTML의 차이

HTML 속성	JSX 속성
class	className
for	htmlFor
style=""	style={{}} (객체로 작성)

JSX 동작 원리

JSX는 React.createElement()로 변환된다.

const element = <h1>Hello, 정인!</h1>;

⬇️ Babel이 컴파일하면:

const element = React.createElement('h1', null, 'Hello');

첫 번째 인자: 태그 이름 ('h1')
두 번째 인자: props 객체 (null이면 속성 없음)
세 번째 이후 인자: 자식(children)

➡️ 최종적으로 가상 DOM(Virtual DOM) 객체가 만들어짐

참고) JSX → Virtual DOM → 실제 DOM으로 처리되는 과정

JSX → React.createElement()
React가 가상 DOM 트리(Virtual DOM Tree) 생성
변경 감지 → 필요한 부분만 실제 DOM에 반영 (Reconciliation)
브라우저에 UI 렌더링

➡️ 이렇게 해서 React는 빠르고 효율적인 렌더링을 제공함

본 후기는 [카카오엔터프라이즈x스나이퍼팩토리] 카카오클라우드로 배우는 AIaaS 마스터 클래스 (B-log) 리뷰로 작성 되었습니다.

'학습일지 > K-Digital Traing' 카테고리의 다른 글

[KDT] AIaaS 마스터클래스 8주차 - 이벤트 핸들링과 상태(state) (0)	2025.05.15
[KDT] AIaaS 마스터클래스 8주차 - 리액트 Hook (1)	2025.05.14
[KDT] AIaaS 마스터클래스 7주차 - NC Dinos 홈페이지의 버그 고쳐보기 (0)	2025.05.07
[KDT] AIaaS 마스터클래스 6주차 - 테라폼, 깃허브 액션 실습 (5)	2025.04.28
[KDT] AIaaS 마스터클래스 5주차 - 프라이빗 서비스 인프라 구축 실습 (0)	2025.04.25

현재글[KDT] AIaaS 마스터클래스 8주차 - React 학습

Study Log

DevOps 엔지니어 지망하고 있습니다.

학습 교재, 깃허브 Fork한 소스가 저장소에 공개(Public)가 안될때, 한국생산성본부, aiaas마스터클래스, AIaaS, 개발자교육, mobaxterm, AWS, nc소프트, 학습 일지, 부트캠프, Mirror Push, 클라우드개발자, EC2, 카카오클라우드, github, 모두를 위한 클라우드 컴퓨팅, 클라우드엔지니어, 카카오엔터프라이즈, 스나이퍼팩토리,

Today :
Yesterday :

Study Log