react 환경을 구축하는 방법(설치 명령어 등)

1단계: 리액트 환경 구축 (Setting Up)

최근에는 속도가 매우 빠른 **Vite(비트)**라는 도구를 사용하는 것이 표준입니다. 터미널(CMD 또는 VS Code 터미널)을 열고 아래 순서대로 명령어를 입력해 보세요.

1. Node.js 설치 확인

먼저 Node.js 공식 사이트에서 LTS 버전을 설치해야 합니다. 설치 후 터미널에 입력하여 버전을 확인하세요.

 

https://nodejs.org/ko

Bash

 

node -v

2. 리액트 프로젝트 생성

프로젝트를 만들 폴더로 이동한 뒤 아래 명령어를 입력합니다.

Bash

 

# 프로젝트 생성 (my-board는 프로젝트 이름입니다)
npm create vite@latest my-board -- --template react

# 생성된 폴더로 이동
cd my-board

# 필요한 라이브러리 설치
npm install

# 개발 서버 실행
npm run dev

브라우저에 표시된 주소(예: http://localhost:5173)로 접속하면 리액트 로고가 뜨는 것을 볼 수 있습니다!

 

2단계: 상태 관리 useState 이해하기

환경이 준비되었다면, 리액트의 핵심인 useState를 배울 차례입니다.

useState란?

컴포넌트 내부에서 **"값이 변하면 화면을 다시 그려야 하는 데이터"**를 만들 때 사용합니다.

기본 문법

JavaScript

 

const [state, setState] = useState(초기값);

• state: 현재 상태 값 (읽기 전용처럼 취급)
• setState: 상태를 변경하는 함수 (이 함수를 호출해야 리액트가 화면을 다시 그림)

---

3단계: 실습 - "좋아요" 버튼 만들기

게시판에서 흔히 쓰이는 '좋아요' 기능을 useState로 구현해 보겠습니다. App.jsx 파일의 내용을 모두 지우고 아래 코드를 넣어보세요.

JavaScript

 

import { useState } from 'react' // 1. useState 불러오기

function App() {
  // 2. 상태 선언: [현재값, 변경함수] = useState(초기값)
  const [like, setLike] = useState(0);
  const [isRed, setIsRed] = useState(false);

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h1>상태 관리 실습</h1>
      
      {/* 3. 상태 값 출력 */}
      <p style={{ fontSize: '24px' }}>
        이 게시글의 좋아요 수: <strong>{like}</strong>
      </p>

      {/* 4. 클릭 시 상태 변경함수 호출 */}
      <button onClick={() => setLike(like + 1)}>
        👍 좋아요 클릭
      </button>

      <button onClick={() => setIsRed(!isRed)} style={{ marginLeft: '10px' }}>
        {isRed ? "검정색으로 변경" : "빨간색으로 변경"}
      </button>

      <div style={{ 
        marginTop: '20px', 
        color: isRed ? 'red' : 'black',
        fontWeight: 'bold' 
      }}>
        상태에 따라 이 글씨의 색상이 변합니다!
      </div>
    </div>
  )
}

export default App

💡 핵심 요약

1. 반응형: like 변수를 우리가 직접 innerHTML로 넣지 않아도, setLike를 호출하는 순간 리액트가 알아서 해당 부분만 숫자를 바꿉니다.
2. 데이터 기반 UI: 색상 변경 버튼을 보면, 우리는 스타일을 직접 바꾸는 게 아니라 isRed라는 상태 값만 바꿉니다. 화면은 그 상태값에 맞춰서 스스로 변합니다.

 

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.