1. React 소스 코드 수정, 배포 및 렌더링

React 앱이 어떻게 화면에 그려지는지 이해하고, 코드를 직접 수정하며 배포까지 경험한다.

1.1. App 컴포넌트 렌더링 과정

React 앱이 브라우저에 표시되기까지의 흐름을 정확히 이해해야 한다. 흐름은 index.html에서 시작된다.

1.1.1. 1단계: index.html 진입

브라우저는 가장 먼저 index.html을 읽는다. 이 파일에는 <div id="root"></div>라는 텅 빈 공간이 있다.

1.1.2. 2단계: main.jsx 실행

index.html 하단을 보면 <script type="module" src="/src/main.jsx"></script>가 있다. 이 스크립트가 실행되면서 React가 깨어난다.

1.1.3. 3단계: React Root 생성 및 렌더링

main.jsx 파일을 보면 다음과 같은 코드가 있다.

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

이 코드는 “HTML의 root 요소를 찾아서, 그 안에 <App /> 컴포넌트를 집어넣으라”는 뜻이다. 결과적으로 App.jsx의 내용이 화면에 나타난다.

1.2. 소스 코드 수정 실습

Vite로 만든 초기 프로젝트에는 불필요한 예제 코드가 많다. 이를 모두 지우고 나만의 화면을 만들어본다.

1.2.1. App.jsx 초기화

src/App.jsx를 열고 아래와 같이 깔끔하게 비운다.

import './App.css'

function App() {
  return (
    <div className="container">
      <h1>나의 첫 React 앱</h1>
      <p>반갑습니다. React를 배우고 있습니다.</p>
    </div>
  )
}

export default App

1.2.2. App.css 수정

src/App.css 파일을 열고 내용을 모두 지운 후 간단한 스타일을 추가한다.

.container {
  text-align: center;
  margin-top: 50px;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
}

h1 {
  color: #61dafb;
}

저장(Ctrl+S)하는 순간 브라우저가 새로고침 없이 변경된 스타일을 반영하는 것을 확인한다. 이것이 HMR(Hot Module Replacement) 기능이다.

1.3. 이미지와 에셋 처리

이미지를 넣는 두 가지 방법을 배운다.

1.3.1. public 폴더 사용

public 폴더에 있는 파일은 / 경로로 바로 접근 가능하다. favicon.ico 등이 여기 있다.

<img src="/vite.svg" alt="Vite 로고" />

1.3.2. src/assets 폴더 사용 (권장)

src 폴더 내의 이미지는 자바스크립트 모듈처럼 import 해서 사용한다. 이 방식은 빌드 시 파일명을 해시값으로 변경해주어 캐싱 문제를 해결해준다.

import reactLogo from './assets/react.svg'

function App() {
  return (
    <img src={reactLogo} alt="React 로고" />
  )
}

1.4. 빌드와 배포

개발 모드(npm run dev)는 개발 편의를 위한 서버다. 실제 사용자에게 보여주려면 최적화된 파일로 변환(Build)해야 한다.

1.4.1. 빌드 명령어 실행

npm run build

명령이 완료되면 프로젝트 폴더에 dist라는 폴더가 생긴다. 이 폴더 안에는 압축되고 난독화된 index.html, CSS, JS 파일이 들어있다. 이것이 최종 결과물이다.

1.4.2. 로컬에서 빌드 결과물 확인

빌드된 파일이 잘 작동하는지 로컬 서버로 미리 볼 수 있다.

npm run preview

1.4.3. 웹 호스팅 서비스 배포 (개념)

dist 폴더의 내용물을 Netlify, Vercel, GitHub Pages 같은 정적 호스팅 서비스에 업로드하면 전 세계 누구나 접속할 수 있는 웹사이트가 된다. 과정은 단순히 dist 폴더를 드래그 앤 드롭 하거나, GitHub 저장소와 연결하면 된다.