React 입문 5가지: SPA/MPA, JSX, 컴포넌트, Props/State, create-react-app 설치까지

React 기초

1. SPA란 무엇인가 ?, MPA란 무엇인가?
2. React란 무엇인가 ?
3. JSX 문법이 무엇인가 ?
4. 컴포넌트가 무엇인지 ?
5. 소스코드 설치 해보기

1. SPA / MPA

SPA(Single-Page)

- 정의

• 하나의 HTML 페이지 기반으로 자바스크립트 라우팅으로 처리
• 초기 로딩 후 HTML 파일 다시 받지 않고 필요 데이터만 받아서 브라우저에서 동적으로 렌더링
• 하나의 HTML 파일에서 동적으로 페이지를 렌더링하는 방식의 웹 어플리케이션
• 페이지 이동 없이 JavaScript로 화면을 부분적으로 갱신 가능

- 장점

• 빠른 전환 속도로 전체 새로고침 없음
• 모바일 앱처럼 부드러운 UX
• 서버 부하 감소 ( 필요한 데이터만 요청 )

- 단점

• 초기 로딩 속도 느림
• SEO 불리
• 브라우저에서 자바스크립트 의존도 높음

MPA(Multi-Page)

- 정의

• 요청 마다 서버가 새 HTML 페이지 렌더링 후 응답
• 여러 개의 HTML 페이지로 구성된 전통적인 웹 어플리케이션
• 페이지 이동 시 마다 서버에 재요청 필요 / 전체 페이지 새로고침 발생
• 전통적인 웹 방식

- 장점

• SEO 유리
• 초기 로딩 속도 빠름
• 단순한 서비스에 적합

- 단점

• 페이지 이동 시 새로고침 발생
• 서버 부하 증가 ( 전체 페이지 새로고침 필요 )

# 정리

페이지 전환과 데이터 처리 방식( 앱 구조 )의 차이
웹 어플리케이션 아키텍쳐 패턴

별도의 개념이지만

SPA = CSR
MPA = SSR

2. REACT

- 정의

Meta에서 만든 자바스크립트 라이브러리(=프레임워크 가능)
UI 생성 시 사용되며 컴포넌트 단위로 화면 구성

- 특징

• 컴포넌트 기반 : 재사용 가능한 조각으로 구분
• 가상 DOM : DOM 변경 최소화하여 성능 향상
• SPA 구축에 강점

3. JSX 문법

- JSX(JavaScript XML)

XML = HTML처럼 태그 이용 마크업언어 / 사용자가 직접 태그 정의 가능

구분XMLHTMLJSON

목적	데이터 저장·전달	화면 표시	데이터 저장·전달
태그 정의	사용자 정의 가능	정해진 태그만 사용	없음(키-값 구조)
데이터 표현	트리 구조	시각적 UI	Key-Value 구조
장점	범용적, 확장성	웹 브라우저 지원	가볍고 직관적
단점	무겁고 길다	데이터 표현 불가	태그 없음, 메타데이터 부족

- 정의

• React에서 사용하는 문법
• 자바스크립트 안에서 HTML처럼 태그이용하여 UI 작성 가능
• 리액트의 확장 문법

JSX 기본 규칙

• 단일 부모 요소 : 2 개 이상의 태그 반환 시
  반드시 하나의 부모 요소( <div> 나 <>)로 포장
• Self-Closing 태그: <br>, <img>와 같이 내용이 없는 태그는 반드시 <br/>, <img/> 처럼 스스로 포장
• HTML 속성: class는 className으로, for는 htmlFor로 표기하는 등 일부 HTML 속성 이름이 다르다
• 자바스크립트 표현식: JSX 안에서 자바스크립트 코드를 사용하려면 {} 중괄호로 포장

- 예시

const element = <h1> Hello React </h1>;
-------------------------------------------
HTML 처럼  태그 이용하여 JavaScript 코드로 변환

핵심 기능 및 문법

1. Props (Properties)

• 역할: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다.
• 특징: props는 읽기 전용(Read-only)입니다. 자식 컴포넌트는 받은 props를 직접 변경할 수 없습니다.
• - 단방향 데이터 흐름을 가집니다. (부모 → 자식) - 문자열, 숫자, 객체, 함수 등 모든 종류의 데이터를 전달할 수 있습니다.

JavaScript

// 부모 컴포넌트 (데이터를 전달)
function Welcome() {
  return (
    <Greeting name="고객" />
  );
}

// 자식 컴포넌트 (데이터를 받아서 사용)
function Greeting(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

변수가 여러 개인 경우

// 자식 컴포넌트 (데이터를 받아서 사용)
function Greeting({name, age}) {
  return <h1>안녕하세요, {name}님! {age}이시군요! </h1>;
}

1. State (상태)

• 역할: 컴포넌트 내부에서 변경될 수 있는 상태를 관리하는 데 사용됩니다. state 값이 변경되면, 리액트가 자동으로 해당 컴포넌트를 다시 렌더링(re-render)하여 화면을 업데이트합니다.
• 사용법: useState라는 훅(Hook)을 사용하여 state를 선언하고 관리합니다.
• - useState는 state 변수와 그 변수를 업데이트하는 함수, 두 가지를 반환합니다. - const [state변수, set함수] = useState(초기값); 형식으로 사용합니다.

JavaScript

import { useState } from 'react';

function Counter() {
  // count라는 state와 이를 업데이트하는 setCount 함수 선언
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1); // state 업데이트
  };

  return (
    <button onClick={handleClick}>
      클릭 횟수: {count}
    </button>
  );
}

4. 컴포넌트

- 정의

• UI를 독립적으로 나누어 재사용 가능한 코드 블록
• 함수형 / 클래스형 작성 가능

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

--------------------------------------
props를 이용해 데이터를 전달받아 UI에 반영.

5. React 소스코드 설치 및 실행

프로젝트 실행(터미널)

npx create-react-app my-app
cd my-app
npm start 

http://localhost:3000 실행 확인 가능

• 설치 시 pakckage.json 및 모듈 생성 확인

cd my-app
npm start

컴포넌트 작성

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>Welcome to React</h1>
        <p>
          <Welcome name="우주혁"/>
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

function Welcome(props) {
  return <h2>Hello, {props.name}👋👋👋</h2>;
}

export default App;

닫는 중괄호 누락으로 에러 발생

app.js

index.js

app.js로 렌더링 대체

---

index.js ( 구 문법 )

• 공식적으로 미지원 문법
  

  

• 최신 문법(18이상)
  
• 리액트 렌더링
  

public/index.html

index.html은 리액트 앱의 유일한 HTML 파일입니다. 리액트는 단일 페이지 애플리케이션(SPA: Single Page Application) 방식으로 작동하기 때문에, 실제로 웹 브라우저가 사용자에게 보여주는 HTML 파일은 오직 이 index.html 하나뿐입니다.

이렇게 직접 입력한 내용은 리액트가 화면을 렌더링하기 전에 잠시 보였다가, 리액트가 렌더링을 시작하는 순간 모두 사라지고 App.js 컴포넌트의 내용으로 덮어씌워집니다.

리액트는 root 요소를 통째로 비우고 그 안에 자신이 그린 가상 DOM(Virtual DOM)을 실제 DOM으로 바꾸기 때문입니다.

index.html로 렌더링 / app.js 오류 발생 자바스크립트 정상 작동 X

index.js의 역할은 public/index.html 파일과 src 폴더의 리액트 컴포넌트들을 연결해주는 다리 역할을 하는 것입니다.
root 요소는 이 연결의 시작점,
최종적으로는 App 컴포넌트가 반환하는 내용으로 완전히 대체됩니다.