[Frontend] #03. React 기초

들어가면서...

React는 처음 다뤄보는 내용이었기에, 제공된 학습 자료 이외에도 Github Copilot등을 통해 다양한 예제를 알아보는 방식으로 공부하였다.

---

React

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리다.

---

React 소개

React는 Facebook(현 Meta)에서 개발한 오픈소스 JavaScript 라이브러리로, 컴포넌트 기반으로 UI를 구성하고 상태 관리를 효율적으로 수행한다.

SPA(Single Page Application) 개발에 주로 사용되며, Virtual DOM을 통해 빠른 렌더링 성능을 제공한다.

React의 주요 특징

• 컴포넌트 기반 구조: 재사용 가능한 독립적인 UI 조각으로 구성
• 단방향 데이터 흐름: 상태 변화를 명시적으로 관리하여 인과 관계 파악이 용이
• JSX 문법: JavaScript에 HTML을 가미한 문법으로 초보자도 쉽게 학습 가능
• Virtual DOM: 실제 DOM 조작을 최소화하여 성능 최적화
• 강력한 커뮤니티: Meta의 적극적인 지원과 활발한 개발자 커뮤니티

---

React 프로젝트 시작하기

Vite를 사용하여 React 프로젝트를 생성할 수 있다.

# React 프로젝트 생성
npm create vite@latest

# 프로젝트 디렉토리로 이동
cd project-name

# 패키지 설치
npm install

# 개발 서버 실행
npm run dev

 

프로젝트 구조

src/
├── components/      # 공통 UI 컴포넌트
│   ├── Header.jsx
│   └── Footer.jsx
├── pages/           # 페이지 컴포넌트
│   ├── Home.jsx
│   └── About.jsx
├── contexts/        # 전역 상태 관리
│   └── ThemeContext.jsx
├── App.jsx          # 메인 컴포넌트
└── main.jsx         # 앱 진입점

---

1️⃣ JSX (JavaScript XML)

• JSX는 JavaScript의 확장 문법으로, HTML과 유사한 문법을 사용할 수 있게 해준다.
• JSX는 트랜스파일러를 거쳐 JavaScript 코드로 변환된다.
• JSX 내에서는 표현식(Expression)만 사용 가능하며, if문이나 for문 같은 문(Statement)은 사용할 수 없다.

function App() {
  const name = "React";
  const isLoggedIn = true;

  return (
    <div>
      <h1>Hello, {name}!</h1>
      {isLoggedIn ? <p>환영합니다!</p> : <p>로그인해주세요</p>}
    </div>
  );
}

 

JSX에서 표현식과 문의 차이

// ✅ 가능: 표현식 사용
function Greeting() {
  const user = { name: "민서", login: true };
  const message = user.login ? "환영합니다" : "로그인 필요";

  return <p>{message}</p>;
}

// ❌ 불가능: JSX 내부에서 if문 사용
function Greeting() {
  return (
    <div>
      {if (isLoggedIn) { "환영" } else { "로그인" }}
    </div>
  );
}

 

JSX는 반드시 하나의 최상위 요소만 반환

// ❌ 잘못된 예시
return (
  <h1>안녕</h1>
  <h2>리액트</h2>
);

// ✅ 해결 1: div로 감싸기
return (
  <div>
    <h1>안녕</h1>
    <h2>리액트</h2>
  </div>
);

// ✅ 해결 2: Fragment 사용
return (
  <>
    <h1>안녕</h1>
    <h2>리액트</h2>
  </>
);

---

2️⃣ Virtual DOM

• React의 가장 큰 특징 중 하나가 Virtual DOM이다.
• DOM(Document Object Model)은 HTML 문서를 JavaScript가 이용할 수 있는 객체 형태로 만든 것이다.
• 웹 애플리케이션에서 사용자와의 상호작용이 많아질수록, DOM을 직접 조작하는 비용이 커진다.
• React는 가상 DOM을 메모리에 유지하고, 변경 사항을 계산한 후 실제 DOM에 변경된 부분만 반영한다.

렌더링 과정

[상태 변경] → [Virtual DOM 업데이트] → [이전 Virtual DOM과 비교] → [변경된 부분만 실제 DOM 업데이트]

---

3️⃣ 컴포넌트 (Component)

• 컴포넌트는 화면의 UI를 구성하는 독립적이며 재사용 가능한 블록이다.
• React에서는 함수형 컴포넌트를 주로 사용한다.
• 컴포넌트 이름은 반드시 대문자로 시작해야 한다.

함수형 컴포넌트

function Welcome({ name }) {
  return <h1>안녕하세요, {name}님!</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="민서" />
      <Welcome name="React 사용자" />
    </div>
  );
}

 

컴포넌트의 구성

• import: 외부 파일의 모듈을 불러올 때 사용
• 컴포넌트 정의: 함수형 컴포넌트로 상태와 로직을 포함
• return: JSX 표현식을 반환
• export: 다른 파일에서 이 컴포넌트를 사용할 수 있도록 내보내기

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default Counter;

---

4️⃣ Props

• Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다.
• Props는 읽기 전용이며, 자식 컴포넌트에서 직접 수정할 수 없다.
• 주로 부모 → 자식의 단방향 데이터 흐름을 따른다.

// 부모 컴포넌트
function App() {
  return (
    <div>
      <Greeting name="민서" age={20} />
      <Greeting name="사용자" age={21} />
    </div>
  );
}

// 자식 컴포넌트
function Greeting({ name, age }) {
  return (
    <div>
      <p>이름: {name}</p>
      <p>나이: {age}</p>
    </div>
  );
}

 

배열 렌더링

function App() {
  const names = ['민서', '사용자1', '사용자2'];

  return (
    <div>
      {names.map((name, index) => (
        <Greeting key={index} name={name} />
      ))}
    </div>
  );
}

 

Props로 함수 전달

function Button({ onClick }) {
  return <button onClick={onClick}>클릭</button>;
}

function App() {
  const handleClick = () => alert("버튼 클릭!");
  return <Button onClick={handleClick} />;
}