React란 무엇인가?

Source: Dev.to

개요

React(React.js 또는 ReactJS라고도 함)는 사용자 인터페이스(UI), 특히 단일 페이지 애플리케이션(SPA)을 만들기 위한 오픈 소스 JavaScript 라이브러리입니다. Meta(구 Facebook)와 다수의 개인 개발자 및 기업 커뮤니티가 유지 관리합니다.

핵심 개념 및 특징

• 컴포넌트 기반 아키텍처: React 애플리케이션은 컴포넌트라 불리는 캡슐화되고 재사용 가능한 UI 조각들로 구성됩니다. 이러한 컴포넌트를 조합해 복잡한 인터페이스를 만들 수 있어 모듈성, 유지 보수성 및 코드 재사용성이 향상됩니다.

• 선언형 뷰: 개발자는 애플리케이션의 각 상태에 대해 UI가 어떻게 보여야 하는지를 기술하고, React는 데이터가 변할 때 필요한 컴포넌트만 자동으로 업데이트하고 렌더링합니다. 이를 통해 코드가 예측 가능해지고 디버깅이 쉬워집니다.

• 가상 DOM (Document Object Model): 실제 DOM을 직접 조작하는 대신(성능 저하 가능) React는 메모리 상에 가벼운 복사본인 가상 DOM을 생성합니다. 데이터가 변경되면 가상 DOM을 업데이트하고 차이점(‘diffing’ 또는 ‘reconciliation’이라 부르는 과정)을 계산한 뒤, 실제 DOM에서 변경이 필요한 부분만 업데이트합니다. 이는 효율적인 렌더링과 높은 성능을 보장합니다.

• JSX (JavaScript XML): React는 JSX라는 문법 확장을 사용해 JavaScript 코드 안에 HTML과 유사한 태그를 작성할 수 있게 합니다. 이를 통해 UI 구조를 정의하는 코드가 더 읽기 쉽고 직관적입니다.

• 단방향 데이터 흐름: React는 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 전달되는 단방향 데이터 흐름을 강제합니다. 이는 데이터 흐름을 예측 가능하게 만들고 애플리케이션 상태를 관리·디버깅하기 쉽게 합니다.

• React Hooks: React 16.8에서 도입된 Hooks는 useState, useEffect와 같은 함수 형태로, 클래스 컴포넌트가 아닌 함수형 컴포넌트에서도 상태와 기타 React 기능을 사용할 수 있게 해줍니다.

React는 무엇에 사용되나요?

• 동적이고 인터랙티브한 웹 애플리케이션 및 사용자 인터페이스 구축(예: 소셜 미디어 피드, 전자상거래 사이트, 대시보드).

• 단일 페이지 애플리케이션(SPA) 개발 – 하나의 HTML 페이지를 로드하고 전체 페이지를 새로 고치지 않고도 콘텐츠를 동적으로 업데이트해 매끄러운 사용자 경험을 제공합니다.

• React Native를 사용해 iOS와 Android용 크로스 플랫폼 모바일 애플리케이션을 만들 수 있으며, 이는 웹 뷰가 아니라 네이티브 UI 컴포넌트로 렌더링됩니다.

• Next.js와 Gatsby와 같이 React 위에 구축된 프레임워크를 이용해 서버‑사이드 렌더링 애플리케이션 및 정적 사이트를 개발합니다.