1강. React 개발 환경 이해

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

1. 웹 개발의 변화와 React

SPA (Single Page Application)의 등장

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

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

React를 사용하는 이유

• 컴포넌트 기반: UI를 레고 블록처럼 쪼개서 개발하므로 재사용성과 유지보수가 뛰어나다.
• 가상 DOM (Virtual DOM): 실제 DOM을 직접 조작하는 것은 느리다. React는 메모리에 가상 DOM을 두고 변경된 부분만 계산하여 실제 화면에 효율적으로 반영한다.
• 생태계: 가장 방대한 커뮤니티와 라이브러리를 보유하고 있다.

2. 필수 개발 도구 설치

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

Node.js와 NPM

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

• Node.js: 자바스크립트 런타임 환경. LTS(장기 지원) 버전 설치를 권장한다.
• NPM (Node Package Manager): Node.js 설치 시 자동 설치된다. 남들이 만든 자바스크립트 도구(라이브러리)를 쉽게 다운로드하고 관리해준다.

node -v
npm -v

VS Code (Visual Studio Code)

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

• ES7+ React/Redux/React-Native snippets: React 코드 자동 완성 기능을 제공한다.
• Prettier: 코드를 깔끔하게 자동 정렬해준다.

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

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

프로젝트 생성 명령어

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

npm create vite@latest .

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

의존성 설치 및 실행

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

cd my-react-app
npm install
npm run dev

터미널에 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. 프로젝트 구조 훑어보기

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

• node_modules/: 설치된 라이브러리들이 모여있는 거대한 폴더. (절대 건드리지 않는다)
• public/: 이미지, 폰트 등 정적 파일 보관소.
• src/: 실제 소스 코드를 작성하는 곳.
  • main.jsx: React 앱의 진입점.
  • App.jsx: 우리가 수정할 메인 화면 컴포넌트.
  • App.css: 컴포넌트 스타일 파일.
• index.html: 웹페이지의 껍데기. React가 이 안의 div id="root"에 내용을 채워 넣는다.
• package.json: 프로젝트 정보와 설치된 라이브러리 목록을 관리하는 명세서.