1강. React 개발 환경 이해

React 19와 Vite를 기반으로 개발 환경을 구축하고 기본 개념을 이해한다.

1. 웹 개발의 변화와 React

SPA (Single Page Application)의 등장

과거의 웹은 페이지를 이동할 때마다 서버로부터 새로운 HTML을 받아오는 MPA(Multi Page Application) 방식이었다. 이는 화면 깜빡임이 발생하고 사용자 경험이 저하되는 단점이 있다.

React는 SPA 방식을 채택한다. 하나의 HTML 페이지(index.html)만 로드하고, 내부의 내용은 자바스크립트로 동적으로 바꿔치기한다. 이로 인해 앱(App)처럼 부드러운 사용자 경험을 제공한다.

React를 사용하는 이유

2. 필수 개발 도구 설치

React 개발을 시작하기 위해 필요한 도구들을 설치한다.

Node.js와 NPM

브라우저 밖에서 자바스크립트를 실행하기 위해 Node.js가 필요하다. React 자체는 브라우저에서 돌지만, 개발 도구(Vite 등)가 Node.js 위에서 돌아간다.

[실습] Node.js 설치 확인
터미널(CMD 또는 PowerShell)을 열고 다음 명령어를 입력한다. 
node -v
npm -v
버전 숫자가 출력되면 정상적으로 설치된 것이다.

VS Code (Visual Studio Code)

마이크로소프트에서 만든 무료 코드 에디터다. React 개발에 필수적인 확장 프로그램들이 많다.

3. Vite로 프로젝트 생성하기

과거에는 CRA(Create React App)를 많이 썼지만, 최근에는 속도가 훨씬 빠른 Vite(비트)를 표준처럼 사용한다.

프로젝트 생성 명령어

프로젝트를 만들고 싶은 폴더에서 터미널을 열고 아래 명령어를 입력한다.

npm create vite@latest .

프레임워크 선택 시 React를, 언어 선택 시 JavaScript(또는 SWC)를 선택한다.

의존성 설치 및 실행

프로젝트 폴더로 이동하여 필요한 라이브러리들을 설치하고 실행한다.

cd my-react-app
npm install
npm run dev
npm install이란?
package.json 파일에 적힌 라이브러리 목록을 보고 node_modules 폴더에 실제 파일들을 다운로드하는 과정이다.

터미널에 http://localhost:5173 같은 주소가 뜨면 브라우저에서 접속해본다. Vite 로고와 React 로고가 돌아가는 화면이 보이면 성공이다.

4. React vs VanillaJS 비교

같은 기능을 구현할 때 순수 자바스크립트(VanillaJS)와 React가 어떻게 다른지 비교한다. 예제는 '숫자 증가 카운터'다.

VanillaJS 방식 (명령형)

DOM 요소를 직접 찾고, 이벤트를 걸고, 내용을 직접 바꿔야 한다.

<!-- HTML -->
<h1 id="count">0</h1>
<button id="btn">증가</button>

<script>
  let count = 0;
  const h1 = document.getElementById('count');
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    count++;
    h1.innerText = count; // 화면을 어떻게 바꿀지 일일이 지정
  });
</script>

React 방식 (선언형)

데이터(상태)만 바꾸면 UI는 알아서 업데이트된다. "어떻게(How)"가 아니라 "무엇을(What)" 보여줄지에 집중한다.

function App() {
  const [count, setCount] = useState(0); // 상태 정의

  return (
    <>
      <h1>{count}</h1> {/* 데이터가 바뀌면 알아서 갱신됨 */}
      <button onClick={() => setCount(count + 1)}>증가</button>
    </>
  );
}

5. 프로젝트 구조 훑어보기

생성된 프로젝트의 주요 파일들을 살펴본다.