[Tech etc.] React (리액트)

React는 Facebook에서 개발 및 유지 관리하는 인기있는 오픈소스 JavaScript 라이브러리로, 특히 단일 페이지 애플리케이션(SPA)를 위한 사용자 인터페이스 (UI)를 구축하기 위해 특별히 설계됐다. React는 특히 재사용 가능한 컴포넌트를 만드는 데 중점을 두고 있으며, 이는 복잡한 인터페이스를 만들기 위해 결합할 수 있는 독립적인 UI 조각이다.

React의 에코시스템, 도구(예: React Developer Tools, Create React App), 다른 라이브러리와의 호환성을 동적이고 대화형이며 빠르게 로드되는 웹 애플리케이션을 구축하는 데 탁월한 선택이다.

 

• Component-Based Architecture
  : React는 고도로 컴포넌트 중심이므로 개발자는 자체 상태를 관리하는 캡슐화된 컴포넌트를 구출할 수 있다. 따라서 UI를 모듈화하고 재사용할 수 있으며 유지 관리가 쉽다.
• Decalarative Syntax
  : React는 선언적 접근 방식을 사용해 UI 컴포넌트를 정의하므로 코드를 더 예측 가능하고 디버깅하기 쉽다. 사용자가 UI의 모양을 지정하면 React는 이를 렌더링하는 방법을 알아서 처리한다.
• Virtual DOM
  : React는 실제 DOM (Document Object Model)의 가상 표현을 유지하며 변경된 DOM 부분만 업데이트한다. 이 접근 방식은 필요한 업데이트만 실제 DOM에 적용되므로 성능이 향상된다.
• Unidirectional Data Flow
  : React에서는 데이터가 부모 컴포넌트에서 자식 컴포넌트로 한 방향으로 흐르기 때문에 데이터를 추적하고 문제를 디버깅하기 더 쉽다. 상태 변경은 컴포넌트 트리 아래로 전파되므로 효과적으로 관리할 수 있다.
• JSX
  : React는 HTML과 유사한 JavaScript용 구문 확장자인 JSX를 사용해 JavaScript 코드 내에서 요소와 컴포넌트를 작성할 수 있다. JSX는 로직과 구조를 한 곳에 결합해 코드를 더 가독성 있고 직관적으로 만든다.
• Hooks
  : React는 함수형 컴포넌트에 상태 및 부작용 관리를 추가하기 위해 내장된 Hook(예: useState, useEffect)을 제공해 React 컴포넌트 내에서 함수형 프로그래밍의 유연성을 향상 시킨다.
• React Router
  : React 라우터는 React 애플리케이션 내에서 탐색 및 라우팅을 관리하는 옵션 패키지로, 여러 뷰를 가진 SPA를 더 쉽게 생성할 수 있도록 해준다.