React란 무엇인가? - React 배우기

리액트 홈

1. React란?

https://odada.me/250

React는 페이스북에서 개발한 UI 라이브러리로, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.

나무위치 보러가기: React

2. React 특징

- Virtual DOM

React는 Virtual DOM을 사용하여 빠른 렌더링을 구현합니다. Virtual DOM은 실제 DOM의 가벼운 복사본으로, React는 Virtual DOM을 사용하여 실제 DOM과 비교하여 변경된 부분만 업데이트합니다.

이미지출처: 소플의 리액트

- Component

React는 컴포넌트 기반으로 UI를 구성합니다. 컴포넌트는 재사용이 가능하며, 각 컴포넌트는 독립적으로 작동합니다.

function App() {
  return <h1>Hello, World!</h1>;
}

- JSX

React는 JSX 문법을 사용하여 JavaScript 코드 내에서 HTML 코드를 작성할 수 있습니다.

- One-way Data Binding

React는 단방향 데이터 바인딩을 사용하여 데이터의 흐름을 예측 가능하게 만듭니다.

- Props & State

React는 Props와 State를 사용하여 컴포넌트 간 데이터를 전달하고 관리합니다.

3. React 설치하기

- Node.js

• Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.
• Node.js는 JavaScript를 서버 사이드에서 실행할 수 있게 해줍니다.

Node.js
LTS 버전으로 설치

- yarn

• Yarn은 Node.js 자바스크립트 런타임 환경을 위해 페이스북이 2016년 개발한 소프트웨어 패키지 시스템입니다.

brew install yarn

- React

npx create-next-app@latest ./

• js 버전 설치

npx create-next-app@latest ./

• ts 버전 설치

npx create-next-app@latest --typescript ./

• 실행

npm run dev

또는

yarn dev

4. React 프로젝트 구조

my-app/
  README.md
  node_modules/
  package.json
  public/   // 이미지, 폰트 등 정적 파일
    index.html
    favicon.ico
  src/
    app/                 // 페이지
      about/            // about 페이지
        page.jsx        // about 페이지
        layout.jsx      // about 레이아웃
      page.js           // index 페이지
      layout.js         // 전역 레이아웃
    components/         // 컴포넌트
    context/            // 상태관리
    data/               // 데이터
    hooks/              // 훅
    styles/             // 스타일
    .gitignore          // git
    .next/              // next.js
    package-lock.json   // npm
    tailwind.config.js  // tailwind

5. React 프로젝트 실행

npm run dev

또는

yarn dev