[React] Hello World

개요

React에서 첫 화면을 출력하는 방법을 알아봅니다.

프로젝트 준비

npm create vite@latest hello-world -- --template react-ts
cd hello-world
npm install
npm run dev

Hello World

src/App.tsx를 아래처럼 작성:

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>React 시작!</p>
    </div>
  );
}

export default App;

브라우저에서 http://localhost:5173 접속하면 Hello, World! 텍스트가 출력됩니다.

코드 구조 이해

// 1. 함수형 컴포넌트: 일반 함수처럼 정의
function App() {

  // 2. return: 화면에 렌더링할 JSX를 반환
  return (

    // 3. JSX: HTML처럼 생겼지만 JavaScript임
    <div>
      <h1>Hello, World!</h1>
    </div>

  );
}

// 4. export default: 다른 파일에서 이 컴포넌트를 사용할 수 있게 내보냄
export default App;

JSX 기본 규칙

1. 최상위 요소는 하나여야 함

// ❌ 오류: 루트 요소 2개
function App() {
  return (
    <h1>제목</h1>
    <p>내용</p>
  );
}

// ✅ 올바름: div로 감싸거나
function App() {
  return (
    <div>
      <h1>제목</h1>
      <p>내용</p>
    </div>
  );
}

// ✅ 올바름: Fragment (<>) 사용 (불필요한 div 없이)
function App() {
  return (
    <>
      <h1>제목</h1>
      <p>내용</p>
    </>
  );
}

2. JavaScript 표현식은 {} 안에 작성

function App() {
  const name = "Alice";
  const age = 30;

  return (
    <div>
      <h1>안녕하세요, {name}님!</h1>
      <p>나이: {age}세</p>
      <p>내년: {age + 1}세</p>
      <p>{new Date().toLocaleDateString()}</p>
    </div>
  );
}

3. HTML 속성명이 다른 경우

// HTML      → JSX
// class     → className
// for       → htmlFor
// onclick   → onClick (카멜케이스)

function App() {
  return (
    <div className="container">
      <label htmlFor="input">이름</label>
      <input id="input" type="text" />
    </div>
  );
}

조건부 렌더링 맛보기

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {/* if 문 대신 삼항 연산자 사용 */}
      {isLoggedIn ? <p>로그인됨</p> : <p>로그인하세요</p>}

      {/* 조건이 true일 때만 렌더링 */}
      {isLoggedIn && <button>로그아웃</button>}
    </div>
  );
}

관련 링크

• React 공식 문서 - 첫 번째 컴포넌트