React

#it #프론트엔드 #javascript #react #spa #frontend #ui

기본 정보

이름: React
분류: JavaScript UI 라이브러리
개발사: Meta (Facebook)
최초 공개: 2013년
개발 언어: JavaScript, TypeScript
주요 용도: 웹 애플리케이션 및 SPA 개발
관련 주제: #React #JavaScript #SPA #Frontend #UI

개요

React는 Meta(Facebook)에서 개발한 오픈소스 JavaScript UI 라이브러리이다.

컴포넌트(Component) 기반 구조를 사용하여 화면을 작은 단위로 분리해 개발할 수 있으며, Virtual DOM을 활용하여 효율적인 렌더링 성능을 제공한다.

현재 React는 웹 프론트엔드 개발에서 가장 널리 사용되는 기술 중 하나이며, Next.js, React Native 등 다양한 생태계의 기반이 되고 있다.

주요 특징

컴포넌트 기반 개발
Virtual DOM 사용
재사용 가능한 UI
선언형(Declarative) 프로그래밍
JSX 문법 지원
풍부한 생태계
SPA 개발에 적합

React 구조

Browser

↓

React App

↓

Component

↓

Virtual DOM

↓

Real DOM

↓

화면 출력

Hello World

function App() {

  return <h1>Hello React</h1>;

}

export default App;

JSX

JSX(JavaScript XML)는 JavaScript 안에서 HTML과 유사한 문법을 사용할 수 있게 해주는 문법이다.

const element =

<h1>Hello</h1>;

브라우저에서는 JavaScript 코드로 변환되어 실행된다.

Component

컴포넌트는 React의 기본 단위이다.

function Button() {

  return (

    <button>

      클릭

    </button>

  );

}

재사용 가능한 UI를 만들 수 있다.

Props

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다.

function User(props){

  return <h1>{props.name}</h1>;

}

사용 예시

<User name="구름" />

State

컴포넌트 내부에서 변경되는 데이터를 관리한다.

const [count, setCount] =

useState(0);

State가 변경되면 화면도 자동으로 다시 렌더링된다.

이벤트 처리

<button

onClick={handleClick}

>

클릭

</button>

JavaScript 함수와 연결하여 동작을 처리한다.

조건부 렌더링

{

login

?

<Home/>

:

<Login/>

}

조건에 따라 다른 화면을 표시할 수 있다.

리스트 출력

users.map(

(user)=>

<li>

{user.name}

</li>

)

배열 데이터를 반복하여 출력할 수 있다.

useEffect

컴포넌트가 렌더링될 때 특정 작업을 수행한다.

useEffect(()=>{

  loadData();

},[]);

API 호출 등에 많이 사용된다.

API 호출

fetch("/api/user")

.then(res=>res.json())

.then(data=>{

});

또는 Axios 라이브러리를 많이 사용한다.

Router

SPA에서 페이지 이동을 처리한다.

대표 라이브러리

React Router

<Route

path="/user"

element={<User/>}

/>

상태 관리

대표 라이브러리

Redux
Zustand
Recoil
MobX
Context API

최근에는 Zustand 사용 비중도 증가하고 있다.

프로젝트 구조

src/

├── components/

├── pages/

├── layouts/

├── hooks/

├── services/

├── assets/

├── utils/

└── App.jsx

Feature 기반 구조를 사용하는 프로젝트도 많다.

빌드 도구

대표 도구

Vite
Create React App (CRA)
Next.js

현재 신규 프로젝트는 Vite 사용이 일반적이다.

Next.js

React 기반의 풀스택 프레임워크이다.

주요 기능

SSR
SSG
SEO 최적화
API Routes
App Router

React Native

React 문법으로 모바일 앱을 개발할 수 있는 프레임워크이다.

지원 플랫폼

Android
iOS

주요 활용 분야

관리자 페이지
쇼핑몰
ERP
SaaS
대시보드
커뮤니티
SNS
모바일 웹

장점

컴포넌트 재사용
높은 생산성
Virtual DOM 기반 성능 최적화
풍부한 라이브러리 생태계
대규모 프로젝트에 적합
활발한 커뮤니티

단점

초기 학습 비용
상태 관리 라이브러리 선택 필요
생태계 변화가 빠름
프로젝트 구조 설계가 중요함

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

Vite 기반 프로젝트 생성
TypeScript 적용
ESLint + Prettier 사용
컴포넌트 단위 개발
Custom Hook 적극 활용
Zustand 또는 Redux 사용
Axios 기반 API 통신
React Query(TanStack Query) 활용
Lazy Loading 적용
코드 스플리팅(Code Splitting) 적용

React와 함께 사용하는 기술

대표 개발 도구

Visual Studio Code
Chrome DevTools
React Developer Tools
Vite
npm
pnpm

출처

React 공식 홈페이지
React 공식 문서
Meta Open Source 자료