[React] 1일차: 리액트와 첫 만남 – 핵심 개념과 JSX 완벽 정리

리액트(React) 공부를 시작하며 배운 핵심 내용을 정리해 봅니다.

리액트는 현재 프론트엔드 개발에서 가장 인기 있는 라이브러리 중 하나로, 사용자 인터페이스(UI)를 구축하기 위해 사용됩니다.

1. 리액트(React)란 무엇인가?

리액트는 페이스북(현 Meta)에서 개발한 UI 라이브러리입니다. 단순히 화면을 그리는 것을 넘어, 복잡한 웹 애플리케이션의 상태를 효율적으로 관리하고 화면을 빠르게 업데이트하는 데 최적화되어 있습니다.

• 컴포넌트(Component) 기반: UI를 독립적인 단위인 '컴포넌트'로 쪼개서 관리합니다. 마치 레고 블록을 조립하듯 화면을 구성할 수 있어 재사용성이 높습니다.
• Virtual DOM (가상 DOM): 실제 DOM을 직접 수정하는 대신, 메모리에 가상의 DOM을 두고 변경 사항만 비교하여 실제 DOM에 반영합니다. 이는 브라우저의 연산 부담을 줄여 성능을 최적화합니다.

2. 개발 환경 설정

리액트 프로젝트를 시작하기 위해 가장 많이 쓰이는 빌드 도구인 Vite를 사용했습니다. 기존의 Create React App(CRA)보다 속도가 압도적으로 빠르다는 장점이 있습니다.

Bash

 

# Vite 프로젝트 생성
npm create vite@latest my-react-app -- --template react

# 의존성 설치 및 서버 실행
cd my-react-app
npm install
npm run dev

3. JSX (JavaScript XML)

리액트에서는 HTML처럼 보이지만 실제로는 자바스크립트인 JSX 문법을 사용합니다.

JSX 작성 시 주의사항

1. 반드시 하나의 부모 요소로 감싸야 함: 여러 요소를 반환할 때는 <div>나 빈 태그 <> </>(Fragment)로 감싸야 합니다.
2. 닫는 태그 필수: <img>나 <br> 같은 태그도 반드시 />로 닫아야 합니다.
3. 카멜 케이스(camelCase) 사용: HTML의 class는 자바스크립트의 예약어이므로 className으로 작성해야 하며, onclick은 onClick으로 작성합니다.
4. 자바스크립트 표현식: 중괄호 { } 안에 변수나 함수를 직접 넣을 수 있습니다.

JavaScript

 

function Welcome() {
  const name = "Ryon";
  return (
    <div className="container">
      <h1>안녕하세요, {name}님!</h1>
      <p>리액트 공부 1일차입니다.</p>
    </div>
  );
}

4. 첫 번째 컴포넌트 만들기

리액트 컴포넌트는 사실 자바스크립트 함수입니다. 대문자로 시작하는 함수를 만들고 JSX를 반환하면 하나의 UI 조각이 됩니다.

JavaScript

 

// App.jsx
function App() {
  return (
    <main>
      <h2>나의 첫 리액트 컴포넌트</h2>
      <Welcome /> 
    </main>
  );
}

export default App;

 

 

Copyright 2026. [버미] all rights reserved.