첫 번째 React 앱 만들기

이 장에서는 그 기본 틀 위에서 여러분만의 첫 번째 리액트 앱을 만들어 보면서, 리액트 코드가 실제로 어떻게 웹 페이지에 나타나는지 직접 경험해 볼 것입니다.

우리는 주로 src 폴더 안의 App.js 파일을 수정하며 리액트 컴포넌트를 작성하게 될 것입니다. 아직 모든 코드를 이해하지 못해도 괜찮습니다. 지금은 '이것을 수정하면 웹 페이지가 이렇게 바뀌는구나!' 하고 직관적으로 느껴보는 것이 중요합니다.

프로젝트 구조 살펴보기

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

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

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

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

이제 VS Code에서 src/App.js 파일을 열어보세요. 현재 파일의 내용은 다음과 유사할 것입니다.

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" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

화면에 보이는 리액트 로고와 "Edit src/App.js and save to reload." 문구, 그리고 "Learn React" 링크가 바로 이 코드에 의해 생성된 것입니다.

이제 이 내용을 우리가 원하는 간단한 문구로 변경해 볼까요?

import logo from './logo.svg'; // 이 줄은 이제 필요 없지만, 일단 그대로 두겠습니다.
import './App.css'; // 이 줄도 일단 그대로 둡니다.

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

export default App;

JSX에 대하여 잠시 알아보기

App.js 파일에서 return 문 안에 작성했던 <div className="App"> ... </div>와 같은 코드들을 보셨을 것입니다. 이것은 HTML처럼 생겼지만 사실은 JSX(JavaScript XML) 라고 부르는 리액트만의 특별한 문법입니다.

JSX는 자바스크립트 안에 HTML(XML)과 유사한 문법을 사용하여 UI를 기술할 수 있도록 해줍니다. 언뜻 보면 HTML과 매우 유사하지만, 다음과 같은 몇 가지 중요한 차이점이 있습니다.

• HTML 속성 이름: HTML에서 class라고 쓰는 속성은 JSX에서는 className으로 작성해야 합니다. for는 htmlFor로 작성해야 합니다. 이는 class나 for가 자바스크립트의 예약어이기 때문입니다.

• 단일 루트 요소: 컴포넌트는 항상 하나의 최상위(Root) 요소를 반환해야 합니다. 예를 들어, 여러 태그를 나란히 반환하고 싶다면 하나의 <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는 자바스크립트의 유연성과 HTML의 직관적인 구조를 결합하여 UI 개발을 매우 강력하고 편리하게 만들어 줍니다. 우리는 앞으로 이 JSX를 사용하여 다양한 리액트 컴포넌트를 만들어나갈 것입니다.

스타일 적용하기

현재 여러분의 웹 페이지는 글씨가 작고 정렬이 되어있지 않아 보기에 좋지 않을 수 있습니다. 리액트 컴포넌트에 스타일을 적용하는 방법은 여러 가지가 있지만, 여기서는 create-react-app에서 기본으로 제공하는 CSS Modules 방식을 사용해 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.js 파일에서 import './App.css'; 라는 코드를 통해 CSS 파일을 불러왔기 때문에, 해당 스타일이 App 컴포넌트에 적용되는 것입니다. 리액트는 이처럼 자바스크립트 코드 내에서 CSS 파일을 불러와 사용할 수 있도록 지원하여 컴포넌트별로 스타일을 관리하기 용이하게 만듭니다.