첫 번째 React 앱 만들기

이 장에서는 그 기본 틀 위에서 여러분만의 첫 번째 리액트 앱을 만들어 봅니다.

리액트 코드가 실제로 어떻게 웹 페이지에 나타나는지 직접 경험해 볼 것입니다.

우리는 주로 src 폴더 안의 App.jsx 파일을 수정하며 리액트 컴포넌트를 작성하게 될 것입니다.

아직 모든 코드를 이해하지 못해도 괜찮습니다.

지금은 이것을 수정하면 웹 페이지가 이렇게 바뀌는구나! 하고 직관적으로 느껴보는 것이 중요합니다.

프로젝트 구조 살펴보기

VS Code로 my-first-react-app 프로젝트를 열고 왼쪽 탐색기(Explorer)를 보면 다음과 같은 폴더 및 파일 구조를 확인할 수 있습니다.

이 중에서 우리가 주로 관심을 가질 파일은 index.html, src/main.jsx, 그리고 src/App.jsx입니다.

• index.html: 이 파일은 여러분의 리액트 애플리케이션이 로드될 기본 HTML 페이지입니다. <div id="root"></div>라는 빈 태그를 찾아보세요. 리액트 애플리케이션은 이 id="root"를 가진 div 안에 렌더링됩니다.
• src/main.jsx: 이 파일은 리액트 애플리케이션의 시작점입니다. 여기서 App.jsx에서 가져온 <App /> 컴포넌트를 index.html의 root 요소에 연결합니다.
• src/App.jsx: 이 파일은 현재 웹 페이지에 보이는 내용을 담고 있는 메인 컴포넌트입니다. 우리는 주로 이 파일을 수정하면서 첫 번째 리액트 앱을 만들어 볼 것입니다.

index.html 안의 모듈 script가 main.jsx를 불러오고, main.jsx가 App을 import해 첫 렌더를 요청합니다. 파일 이름만 외우기보다 이 연결을 순서대로 찾으세요. JSX의 함수 컴포넌트는 App처럼 대문자로 시작하며, 단순히 함수를 선언하는 것만으로 브라우저에 연결되지는 않습니다.

App.jsx 수정하여 내용 변경하기

이제 VS Code에서 src/App.jsx 파일을 열어보세요.

기본 템플릿에는 Vite와 React 로고, 카운터 예제, HMR 안내 문구가 들어 있습니다.

처음에는 이 예제 코드를 단순한 화면으로 바꾸며 컴포넌트 함수가 반환한 JSX가 브라우저 화면이 된다는 점을 확인하면 됩니다.

이제 이 내용을 우리가 원하는 간단한 문구로 변경해 보겠습니다.

import './App.css';

function App() {
  return (
    <div className="App">
      {/* 여기에 새로운 내용을 작성합니다 */}
      <h1>나 혼자 React!</h1>
      <p>첫 번째 React 앱을 만들고 있습니다.</p>
      <p>정말 재미있네요!</p>
    </div>
  );
}

export default App;

JSX에 대하여 잠시 알아보기

App.jsx 파일에서 return 문 안에 작성했던 <div className="App"> ... </div>와 같은 코드들을 보셨을 것입니다.

이것은 HTML처럼 생겼지만 사실은 JSX(JavaScript XML)라고 부르는, React 컴포넌트에서 자주 쓰는 자바스크립트 문법 확장입니다.

JSX는 자바스크립트 안에 HTML(XML)과 유사한 문법을 사용하여 UI를 기술할 수 있도록 해줍니다.

언뜻 보면 HTML과 매우 유사하지만, 다음과 같은 몇 가지 중요한 차이점이 있습니다.

• HTML 속성 이름: HTML의 class와 for에 대응하는 className, htmlFor처럼 이 React DOM 예제에서는 정해진 프로퍼티 이름을 사용합니다. 많은 이름은 onClick처럼 camelCase이며, aria-*와 data-*는 하이픈 표기를 유지합니다. HTML의 class·for와 JSX 표기를 구별하며, 모든 속성을 하나의 이름 변환 규칙으로 추측하지 않습니다.

• 단일 루트 요소: 여러 JSX 태그를 나란히 하나의 표현식으로 반환할 때는 묶음이 필요합니다. 예를 들어, 여러 태그를 나란히 반환하고 싶다면 하나의 <div>나 <> (프래그먼트)로 감싸야 합니다.

  // ⭕ 올바른 JSX (하나의 div로 감싸져 있음)
  function MyComponent() {
    return (
      <div>
        <h1>제목</h1>
        <p>내용</p>
      </div>
    );
  }
  // ❌ 잘못된 JSX (두 개의 최상위 요소)
  // function MyComponent() {
  //   return (
  //     <h1>제목</h1>
  //     <p>내용</p>
  //   );
  // }

  <div>로 감싸는 것이 번거롭거나 불필요한 DOM 노드를 생성하고 싶지 않을 때는 <></>와 같은 빈 태그를 사용할 수 있는데, 이를 프래그먼트(Fragment)라고 부릅니다.

  // ⭕ 올바른 JSX (프래그먼트 사용)
  function MyComponent() {
    return (
      <>
        <h1>제목</h1>
        <p>내용</p>
      </>
    );
  }

• 자바스크립트 표현식 삽입: JSX 내부에서 중괄호 {}를 사용하면 자바스크립트 표현식을 삽입할 수 있습니다. 예를 들어, 변수의 값이나 함수의 결과 등을 UI에 바로 렌더링할 수 있습니다.

  function Welcome() {
    const name = '독자 여러분';
    return (
      <h1>안녕하세요, {name}!</h1>
    );
  }

  JSX는 자바스크립트 안에서 UI 구조를 선언할 수 있게 해 줍니다.

  이후 예제에서는 JSX로 리액트 컴포넌트를 작성합니다.

스타일 적용하기

현재 여러분의 웹 페이지는 글씨가 작고 정렬이 되어 있지 않아 보기에 좋지 않을 수 있습니다.

리액트 컴포넌트에 스타일을 적용하는 방법은 여러 가지가 있지만, 여기서는 Vite 기본 프로젝트에서 바로 사용할 수 있는 일반 CSS 파일인 App.css를 수정해 보겠습니다.

.App {
  text-align: center; /* 텍스트를 가운데 정렬 */
  background-color: #f0f0f0; /* 배경색 변경 */
  min-height: 100vh; /* 최소 높이를 뷰포트 높이로 설정 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin); /* 폰트 크기 조정 */
  color: #333; /* 텍스트 색상 변경 */
}

h1 {
  color: #007bff; /* 제목 색상 파란색 */
  margin-bottom: 20px;
}

p {
  color: #555; /* 단락 텍스트 색상 회색 */
  line-height: 1.5;
}

App.jsx 파일에서 import './App.css';라는 코드를 통해 CSS 파일을 불러왔기 때문에, 해당 스타일이 App 컴포넌트 화면에 적용됩니다.

이 Vite 프로젝트에서는 Vite가 CSS 파일 import를 처리하므로, 컴포넌트의 화면 구조와 스타일의 연결을 자바스크립트 파일에서 함께 추적할 수 있습니다.

기본 템플릿의 index.css에는 body의 정렬·색상·최소 폭 같은 전역 규칙이 남아 있을 수 있습니다. App.css만 바꾸고 화면 전체가 같은 모양이 되리라고 가정하지 않습니다. 이번 독립 실습에서는 main.jsx의 import './index.css'는 유지하고, index.css의 내용을 다음처럼 교체하여 전역 조건을 고정합니다. App.css의 원래 코드는 그대로 사용합니다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 0;
  font-family: system-ui, sans-serif;
}

#root {
  width: 100%;
  min-height: 100vh;
}

.App {
  padding: 16px;
}

이제 root의 기본 여백에 더해진 100vh가 아니라 App 자체가 화면 높이를 채웁니다. 좁은 화면에서 긴 제목은 자연스럽게 줄바꿈할 수 있고, 글자색과 배경색은 App.css가 정합니다. index.css의 .App은 공간을, App.css의 .App은 정렬과 색 등을 설정하므로 두 파일의 역할을 함께 읽으세요.

내용과 표현식을 따로 바꾸기

앞의 App.jsx에서 첫 번째 p만 오늘은 {2 + 3}번째 학습입니다.라는 JSX 내용으로 바꾸고 h1은 그대로 둡니다. 저장 뒤 보이는 첫 p와 h1을 먼저 예상하세요. 계산식 주위의 중괄호를 지우면 무엇이 표시되나요? App.css의 제목 색을 바꾸는 것만으로 학습 횟수도 달라지나요?

첫 React 앱에서는 프로젝트 구조를 통째로 외우기보다 진입 파일, App 컴포넌트, 스타일, 브라우저 화면이 이어지는 경로를 확인합니다.

이 연결이 보이면 다음 장부터는 JSX 안에서 데이터를 표현하고 이벤트로 상태를 바꾸는 흐름을 훨씬 자연스럽게 따라갈 수 있습니다.