[React] | Vite 설치, JSX 문법, 컴포넌트까지 정리

🔧 React 프로젝트 시작하기 (Vite + React)

 

1. Node.js 설치

• 공식 웹사이트: https://nodejs.org/ko/download
• Node.js는 자바스크립트 실행 환경
• 필수 도구: node와 npm이 함께 설치됨

Node.js — Node.js® 다운로드

 

---

2. Vite로 React 프로젝트 생성

npm create vite@latest projectname1

projectname1은 원하는 프로젝트 폴더명

---

3. 프로젝트 세팅

cd projectname1
npm install         # 필요한 패키지 설치
npm run dev         # 개발 서버 실행 (Ctrl + F5)​

• 서버 종료: Ctrl + C

---

📁 주요 파일 및 구조

📄 package.json

• JavaScript 프로젝트의 설정 파일
• Java에서의 build.gradle과 유사

📄 index.html

• React가 렌더링되는 진입점
• <div id="root"></div> ← 여기에 React 앱이 붙음 (가장 중요)

---

JSX와 컴포넌트 기본

JSX란?

• JavaScript + HTML = JSX
• JavaScript 내부에서 HTML처럼 마크업 작성 가능

JSX 문법 특징

• 컴포넌트는 하나의 최상위 엘리먼트만 반환 가능
  ❌ 오류:
• jsx

return (
  <div>안녕</div>
  <div>안녕</div>
);

✅ 올바른 방식:

return (
  <div>
    <div>야호</div>
    <div>반갑</div>
  </div>
);

또는 빈 태그 <> </> 사용 가능:

return (
  <>
    <div>야호</div>
    <div>반갑</div>
  </>
);​

• 닫는 태그 필수
  • <img> 태그 등도 <img /> 형식으로 닫아야 함
  • <br> → <br />로 작성

---

🎨 스타일 및 컴포넌트

index.css

• 초기 설정 CSS
• 원하면 전부 삭제해도 무방 

  ---

  컴포넌트 작성 (파일 확장자: .jsx)

 

 

리액트전용 컴포넌트파일 : jsx 파일을 만들어야함

import './MyAppButton.css';

//매우 작은 컴포넌트
//컴포넌트 안쪽에 호출할수있고 그 안에 또 호출할 수 있음
//children = 정해져 있는 변수 명
function MyAppButton({children}) {
    return(
        <div className='my-button'>{children}</div>
    )
}

export default MyAppButton;

• children: 컴포넌트 내부에서 전달된 내용
• {}: JSX 안에서 JavaScript 표현식을 사용함
• 재사용 가능한 작은 UI 단위 만들기 용이

 

 

JSX 참고: https://ko.react.dev/learn/writing-markup-with-jsx

JSX로 마크업 작성하기 – React