[JavaScript 프레임워크] 1일차: React 기초 이해하기

1. React 기초

React란 무엇인가?

React는 Facebook에서 개발한 UI 라이브러리로, 컴포넌트 기반의 사용자 인터페이스를 구축하는 데 사용됩니다. React는 효율적인 상태 관리를 통해 동적이고 반응성 있는 웹 애플리케이션을 쉽게 만들 수 있도록 도와줍니다.

 

React 설치 및 프로젝트 설정

React 프로젝트를 설정하기 위해, Node.js와 npm이 필요합니다. 프로젝트를 생성하고 설정하는 방법은 다음과 같습니다.

 

1. Node.js와 npm이 설치되어 있는지 확인합니다.

node -v
npm -v

 

2. Create React App을 사용하여 새로운 React 프로젝트를 생성합니다.

npx create-react-app my-react-app
cd my-react-app

 

3. 프로젝트 폴더 구조는 다음과 같습니다.

my-react-app/
├── node_modules/
├── public/
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── reportWebVitals.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

 

4. 프로젝트를 실행합니다.

npm start

 

브라우저에서 http://localhost:3000을 열면 React 애플리케이션이 실행됩니다.

 

React의 주요 개념

1. 컴포넌트

컴포넌트는 React의 기본 단위입니다. 컴포넌트는 재사용 가능한 UI 요소로, 클래스 컴포넌트와 함수 컴포넌트로 나뉩니다.

 

함수 컴포넌트 예제

// src/App.js
import React from 'react';

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

export default App;

 

2. JSX

JSX(JavaScript XML)는 JavaScript와 HTML을 결합한 문법으로, React에서 UI를 정의하는 데 사용됩니다.

const element = <h1>Hello, world!</h1>;

 

3. 상태 (State)

상태는 컴포넌트의 동적 데이터를 관리합니다. 함수 컴포넌트에서는 useState 훅을 사용하여 상태를 관리합니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

 

4. 속성 (Props)

속성은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

export default App;

 

React 개발 도구

1. React Developer Tools

React Developer Tools는 브라우저 확장 프로그램으로, React 컴포넌트 트리와 상태를 쉽게 확인하고 디버깅할 수 있습니다.

• Chrome 확장 프로그램
• Firefox 확장 프로그램

 

2. 코드 스플리팅

코드 스플리팅은 애플리케이션을 여러 청크로 나누어 초기 로딩 시간을 줄이고, 필요한 시점에 필요한 코드만 로드할 수 있게 합니다.

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default App;

 

결론

React는 컴포넌트 기반의 사용자 인터페이스를 구축하는 데 매우 강력한 도구입니다. 이번 글을 통해 React의 기본 개념과 설치, 프로젝트 설정 방법을 배웠습니다.

 

다음 글에서는 Vue.js 기초에 대해 알아보겠습니다. 다음 글에서 만나요!