728x90
반응형
React란?
- React는 페이스북에서 개발한 사용자 인터페이스(UI)를 개발하기 위한 자바스크립트 라이브러리입니다.
- 컴포넌트 기반 아키텍처를 제공하여 UI 개발을 단순화합니다.
React의 특징
- 컴포넌트 기반: UI를 작은 독립적인 부분으로 나누어 관리할 수 있습니다.단
- 방향 데이터 흐름: 데이터의 단방향 흐름을 통해 예측 가능하고 유지보수가 용이한 코드를 작성할 수 있습니다.
- 재사용 가능한 컴포넌트: 컴포넌트들을 재사용하여 복잡한 UI를 구성할 수 있습니다.
- 가상 DOM: 실제 DOM과 동기화되어 UI 변경 시 빠른 업데이트를 가능하게 합니다.
React의 가상 DOM 개념과 장점
가상 DOM
- React는 상태가 업데이트될 때마다 가상 DOM과 기존의 실제 DOM과 비교합니다.
- 이 과정에서 실제 DOM에 필요한 최소한의 변경만을 반영하여 렌더링을 수행합니다.
- 이로 인해 불필요한 DOM 조작과 렌더링이 줄어들어 성능이 향상됩니다.
가상 DOM의 장점
- 성능: 가상 DOM을 통해 효율적인 업데이트를 가능하게 하여 빠른 렌더링과 최적화된 성능을 제공합니다.
- 크로스 플랫폼 호환성: 가상 DOM은 브라우저의 특정 기능에 종속되지 않아 여러 환경에서 일관된 동작을 보장합니다.
- 따라서 React에서 DOM에 직접 접근하는 것은 권장하지 않습니다.
React의 또다른 장점
- 풍부한 생태계와 커뮤니티: 다양한 도구와 라이브러리, 방대한 자료와 지원을 제공받을 수 있습니다.
- React Native: React와 같은 패러다임을 사용하여 모바일 애플리케이션을 개발할 수 있습니다.
주요 React 라이브러리 및 도구 소개
- Create React App (CRA)
- React 애플리케이션을 빠르게 시작할 수 있는 공식 CLI 도구입니다.
- 번들링, 빌드 설정 등의 초기 설정을 자동으로 수행해 줍니다.
- React Router
- React 애플리케이션에서 라우팅을 관리하는 라이브러리입니다.
- SPA(Single Page Application) 에서 페이지 간 이동을 쉽게 구현할 수 있습니다.
- Redux
- 애플리케이션의 상태 관리를 위한 라이브러리입니다.
- 복잡한 상태 관리 로직을 간결하게 유지할 수 있습니다.
- React Query
- 서버 상태를 관리하고 데이터 페칭을 간소화하는 라이브러리입니다.
- 캐싱, 동기화, 서버 상태 관리 등을 효율적으로 처리하도록 해줍니다.
- Styled-components
- 컴포넌트 기반 스타일링 도구입니다.
- 자바스크립트 코드 내에서 CSS를 작성하여 스타일을 컴포넌트와 함께 관리할
수 있습니다.
- Tailwind CSS
- 미리 정의된 CSS 클래스 사용하여 개별 스타일링을 할 수 있는 도구입니다.
- 커스터마이징과 재사용성에 강점이 있습니다.
- NextUI
- 최신 UI 컴포넌트 라이브러리로서 아름답고 사용하기 쉬운 컴포넌트 라이브러리입니다.
- 다크 모드, 테마 커스터마이징 등의 기능을 포함하고 있습니다.
728x90
반응형
'카카오테크 부트캠프' 카테고리의 다른 글
| [카카오테크 부트캠프] 상태(State)와 속성(Props) (1) | 2024.11.28 |
|---|---|
| [카카오테크 부트캠프] React 컴포넌트 (0) | 2024.11.28 |
| [카카오테크 부트캠프] 7일차 회고 (0) | 2024.11.24 |
| [카카오테크 부트캠프] Rest API와 GraphQL (0) | 2024.11.21 |
| [카카오테크 부트캠프] 에러 처리 및 디버깅 (1) | 2024.11.19 |