React 실전 가이드: 입문

React의 세계에 오신 것을 환영합니다! 이 가이드는 React를 처음 시작하는 분들을 위해 만들어졌습니다. 가장 기본적인 개념부터 차근차근 알아보고, 직접 코드를 작성하며 React와 친해져 봅시다.

목차

1. React, 왜 배워야 할까요?

   • React란?
   • React의 핵심 장점

2. 첫 React 프로젝트 시작하기

   • 개발 환경 준비
   • create-react-app으로 프로젝트 생성

3. React의 핵심 문법 3가지

   • JSX: JavaScript와 HTML을 한번에
   • 컴포넌트: 재사용 가능한 UI 조각
   • Props와 State: 데이터를 다루는 방법
4. 
   

   간단한 예제: 나만의 카운터 만들기

   
   

---

1. React, 왜 배워야 할까요?

1.1. React란?

React는 페이스북에서 개발한 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다. 웹사이트의 ‘보이는 부분’을 쉽고 효율적으로 만들 수 있도록 도와주는 도구라고 생각하면 됩니다.

1.2. React의 핵심 장점

• 컴포넌트 기반: 레고 블록처럼 UI를 여러 개의 독립적인 ‘컴포넌트’로 나누어 만듭니다. 덕분에 코드를 재사용하기 쉽고, 유지보수가 편리해집니다.
• 빠른 속도: 가상돔(Virtual DOM)을 사용하여 변경된 부분만 실제 화면에 업데이트하므로, 불필요한 작업을 줄여 빠른 성능을 보여줍니다.
• 선언형 코드: “이렇게 저렇게 해서 이걸 만들어줘”가 아니라, “이러한 상태일 때, 화면은 이 모습이어야 해”라고 선언적으로 코드를 작성합니다. 코드가 훨씬 직관적이고 예측 가능해집니다.

---

2. 첫 React 프로젝트 시작하기

2.1. 개발 환경 준비

React 개발을 위해서는 컴퓨터에 Node.js와 npm(또는 yarn)이 설치되어 있어야 합니다. Node.js를 설치하면 npm은 자동으로 함께 설치됩니다.

2.2. create-react-app으로 프로젝트 생성

가장 쉬운 방법은 React 팀에서 공식적으로 제공하는 create-react-app 도구를 사용하는 것입니다. 터미널(명령 프롬프트 또는 PowerShell)을 열고 다음 명령어를 순서대로 입력하세요.

# 1. 'my-first-react-app'이라는 이름의 React 프로젝트를 생성합니다.
npx create-react-app my-first-react-app

# 2. 생성된 프로젝트 폴더로 이동합니다.
cd my-first-react-app

# 3. 개발 서버를 실행합니다.
npm start

npm start 명령어를 실행하면, 잠시 후 브라우저에 React 로고가 빙글빙글 돌아가는 시작 페이지가 나타날 것입니다. 첫 React 프로젝트가 성공적으로 실행된 것입니다!

---

3. React의 핵심 문법 3가지

3.1. JSX: JavaScript와 HTML을 한번에

JSX는 JavaScript 파일 안에서 HTML과 유사한 코드를 작성할 수 있게 해주는 문법입니다.

// 일반 JavaScript 변수
const name = "React";

// 변수를 포함한 JSX 코드
const element = <h1>Hello, {name}!</h1>; // 결과: <h1>Hello, React!</h1>

주의할 점:

• HTML의 class 속성은 JSX에서 className으로 써야 합니다. (class는 JavaScript의 예약어이기 때문입니다.)
• 모든 태그는 반드시 닫혀있어야 합니다. (예: <br> -> <br />)

3.2. 컴포넌트: 재사용 가능한 UI 조각

컴포넌트는 React의 심장입니다. UI를 독립적인 단위로 쪼개어 관리할 수 있게 해줍니다. 현재는 주로 함수형 컴포넌트를 사용합니다.

// 'Welcome'이라는 이름의 간단한 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 컴포넌트 사용하기
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

3.3. Props와 State: 데이터를 다루는 방법

• 
  

  Props (Properties): 부모 컴포넌트가 자식 컴포넌트에게 물려주는 데이터입니다. 위 예제의 name="Sara"가 바로 props입니다. Props는 자식 컴포넌트 안에서 절대 직접 수정할 수 없습니다.

  
  
• 
  

  State (상태): 컴포넌트가 자체적으로 가지는 내부 데이터입니다. 사용자의 입력이나 시간의 흐름에 따라 변할 수 있습니다. State가 변경되면, React는 컴포넌트를 화면에 다시 그려줍니다(리렌더링). State는 useState라는 Hook을 사용해 만듭니다.

  
  

---

4. 간단한 예제: 나만의 카운터 만들기

지금까지 배운 개념을 모두 활용하여 간단한 카운터 컴포넌트를 만들어 보겠습니다. src/App.js 파일의 내용을 아래 코드로 바꿔보세요.

import React, { useState } from 'react'; // useState를 import 합니다.
import './App.css';

function App() {
  // 'count'라는 이름의 state를 만들고, 초기값을 0으로 설정합니다.
  // setCount는 count 값을 변경할 때 사용할 함수입니다.
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <header className="App-header">
        {/* state인 count 값을 화면에 보여줍니다. */}
        <p>You clicked {count} times</p>

        {/* 버튼을 클릭하면 setCount 함수를 호출하여 count 값을 1 증가시킵니다. */}
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </header>
    </div>
  );
}

export default App;

코드를 저장하면 브라우저 화면이 자동으로 새로고침되고, ‘Click me’ 버튼이 있는 카운터가 나타날 것입니다. 버튼을 누를 때마다 숫자가 올라가는 것을 확인해보세요. 이것이 바로 State가 변경될 때 React가 화면을 업데이트하는 방식입니다.

이제 여러분은 React의 가장 중요한 첫걸음을 내디뎠습니다. 이 기본기를 바탕으로 더 복잡하고 멋진 웹 애플리케이션을 만들어 나갈 수 있을 것입니다.