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

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

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

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

1단계: index.html 진입

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

2단계: main.jsx 실행

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

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

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

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

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

2. 소스 코드 수정 실습

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

App.jsx 초기화

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

import './App.css'

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

export default App

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) 기능이다.

3. 이미지와 에셋 처리

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

public 폴더 사용

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

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

src/assets 폴더 사용 (권장)

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

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

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

4. 빌드와 배포

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

빌드 명령어 실행

npm run build

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

로컬에서 빌드 결과물 확인

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

npm run preview

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

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