[React] 리액트 시작하기

1. 리액트

리액트는 라이브러리로 분류되며, 개발 방법의 자율성이 높음.

하지만 시간이 지나면서 프레임워크의 특성을 일부 포함하며 진화

라이브러리 vs 프레임워크 비교

라이브러리: 떡볶이 → 떡, 고추장, 오뎅 등등 다 직접 조합해서 만드는 것

프레임워크: 밀키트

리액트 역사

1. 리액트는 Jordan Walke가 개인 사이드 프로젝트로 개발하여 출시
2. 페이스북의 일부 시스템에 리액트를 적용했고, 매우 긍정적인 반응을 획득
3. 이후 오픈소스로 전환되어 누구나 코드를 보고 수정을 제안 가능
   1. (단, 변경사항은 오픈소스 관리자의 승인 필요)
4. 전자정부프레임워크에 공식 등록되어, 정부 발주 프로젝트에서 공식적으로 사용 가능

리액트의 특징

1. 컴포넌트 기반: UI를 작은 컴포넌트 단위로 나누어 재사용성과 유지보수성을 향상
2. 선언형 프로그래밍: 상태 변화에 따라 UI를 선언적으로 업데이트
3. 가상 DOM: DOM 조작을 최소화하여 성능을 최적화

---

2. 리액트 설치 및 실행

CRA

• CRA(Create React App)는 리액트 애플리케이션을 빠르게 생성하기 위한 도구

다만, 최근 유지보수가 중단(가장 최근 업데이트 2022년)되었고, 실무에서는 거의 미사용

설치

1. 프로젝트 폴더를 생성한 후 해당 디렉토리로 이동
2. 설치 명령어

npx create-react-app .

• npx: 최신 버전을 가져와 설치
  • npx는 없으면 서버에서 가장 최신 버전을 가져와서 설치하기 때문
• .: 현재 디렉토리에 설치하겠다는 의미

실행

npm start

• 브라우저에서 자동으로 localhost:3000에 기본 페이지가 표시
• npm start는 npm run start의 축약형

---

Vite 설치 ✅

Vite는 빠르고 가벼운 빌드 도구로, 최신 트렌드를 반영한 개발 환경 제공. SWC를 사용해 더욱 빠른 컴파일 속도 보유

설치

1. 프로젝트 폴더 생성 후 해당 디렉토리로 이동
2. 설치 명령어

npm create vite@latest .

SWC

설치 시 다음과 같은 프롬프트 표시

❯   JavaScript
    JavaScript + SWC
    TypeScript
    TypeScript + SWC

SWC(Speedy Web Compiler) 옵션 선택 시 Babel보다 빠른 컴파일 속도를 제공하는 프로젝트 생성

SWC란?

국내 개발자가 만든 Rust 기반 컴파일러로, 버셀에서 채용

빠른 성능과 효율적인 코드 최적화가 특징. Vite의 기본 트랜스파일러로 사용

노드모듈 없이 기본 구조만 포함, npm i로 설치 후 프로젝트 시작

실행

npm run dev

• localhost:5173에서 애플리케이션 실행

---

3. 리액트 문법 JSX

리액트는 JSX(JavaScript + XML)라는 독특한 문법을 사용해 HTML과 유사한 방식으로 UI 작성

JSX 규칙

1. 하나의 최상위 요소 반환 필수
2. 태그는 닫힘 필수 (e.g., <br />)
3. 속성명은 카멜케이스로 작성 (e.g., className, htmlFor)
4. 주석은 { /* 주석 내용 */ } 형태로 작성
5. 자바스크립트 예약어 사용 불가 (e.g., for 대신 htmlFor)

권장 규칙

• 한 줄 이상의 코드는 소괄호로 묶음

JSX 예제

export default function App() {
  return (
    <div>
      <h1>Hello, React JSX!</h1>
      <h2>Create Element</h2>
    </div>
  );
}

createElement vs JSX

리액트의 두 가지 엘리먼트 생성 방식

1. createElement 방식: 리액트 초기부터 존재한 순수 JavaScript 기반 방식
   • 문법이 복잡하고 가독성이 낮음
   • 중첩된 엘리먼트 생성 시 코드가 매우 복잡함
2. JSX 방식: HTML과 유사한 문법으로 직관적인 코드 작성
   • 별도의 환경 설정이 필요했으나, 현재는 대부분의 개발 도구에서 기본 지원
   • 가독성이 좋고 유지보수가 용이함

// createElement 예시

  <div id="root"></div>
// 기본 예제
//createElement(태그명, 속성(객체형태), 콘텐츠)
const element = React.createElement("h1", { id: "title" }, "Hello, React!");
// ReactDOM.render로 화면에 컴포넌트를 렌더링
ReactDOM.render(element, document.getElementById('root'));

// 중첩 예제
//createElement(태그명, 속성(객체형태), 콘텐츠1, 콘텐츠2, 콘텐츠3)
const h1El = React.createElement("h1", null, "Hello, React!");
const h2El = React.createElement("h2", null, "Create Element");
const main = React.createElement("main", { id: "main" }, h1El, h2El);
ReactDOM.render(main, document.getElementById('root'));

export default와 export의 차이

• export default: 파일당 하나만 사용 가능하며, 원하는 이름으로 임포트 가능
• export: 여러 항목을 내보낼 수 있으며, 임포트 시 정확한 이름을 사용해야 함

예제

// 파일1.jsx
export default function Component() {
  return <div>컴포넌트</div>;
}

// 임포트
import Component from './파일1';

// 파일2.jsx
export function Component1() {
  return <div>컴포넌트1</div>;
}

export function Component2() {
  return <div>컴포넌트2</div>;
}

// 임포트
import { Component1, Component2 } from './파일2';

4. 리액트 프로젝트 구조

Vite로 생성된 리액트 프로젝트 구조

my-react-app/
├── node_modules/     # 종속성 모듈들 (건드릴 일 없음)
├── public/           # 정적 파일들 (빌드 도구에 영향을 받지 않는 파일)
│   └── index.html    # 메인 HTML 파일
├── src/              # 소스 코드
│   ├── App.jsx       # 메인 컴포넌트
│   ├── main.jsx      # 진입점
│   ├── index.css     # 전역 스타일
│   └── assets/       # 이미지 및 자원 파일 (public과 달리 빌드 영향을 받음)
├── package.json      # 프로젝트 설정 및 종속성 정보 (중요)
└── vite.config.js    # Vite 설정 파일 (건드릴 일 없음)
└── .gitignore        # Git 무시 파일 목록

파일 정리 팁

1. 필요 없는 파일 삭제

   • index.css와 App.css 등 사용하지 않는 파일 제거
   • main.tsx에서 CSS import 구문 제거
   • 에셋폴더 제거

2. .gitignore 설정 추가

   • package-lock.json, .env, node_modules 등 커밋 제외할 파일 추가
   • 일부 예시

   node_modules
   dist
   dist-ssr
   *.local
   package-lock.json
   .env