[카카오테크 부트캠프] React 소개

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 컴포넌트 라이브러리로서 아름답고 사용하기 쉬운 컴포넌트 라이브러리입니다.
  • 다크 모드, 테마 커스터마이징 등의 기능을 포함하고 있습니다.