[리액트] 리액트란?

리액트란

React (aka React.js or ReactJS) is an open-source front-end JavaScript library that is used for building composable user interfaces, especially for single-page applications. It is used for handling view layer for web and mobile apps based on components in a declarative approach.

• 정리하면, 자바스크립트 라이브러리 중 하나로 사용자 인터페이스를 만들 때 사용되며, 특히 SPA 애플리케이션을 만들 때 많이 사용된다.
• composable software?
  • 모듈로 시스템 구조를 만드는 방식

리액트의 역사

• JSX는 XHP에서 파생된 아이디어다

리액트는 메타(구 페이스북)에서 만들어졌다. 페이스북의 코드가 너무 복잡해져서 앱 유지보수나 신규 기능 반영이 어려워져서 효율적인 코드 관리가 필요했고, 그렇게 나온 것이 리액트다.

XHP에서 리액트는 시작되었다고 할 수 있는데, 기본적으로 XML 같은 문서를 PHP 표현으로 변환하는 PHP 익스텐션이었다. HTML 요소들을 커스텀하고 재사용 가능하게 만들기 위한 목적이었다. 하지만 PHP 자체가 서버에서 해석되면서 클라 ⇒ 서버로의 요청이 많아지는 무제가 있었다. 그래서 브라우저의 JS를 사용해 xhp 모델을 구현하는 방법으로 문제를 해결했는데, 이게 리액트로 발전하게 된 것이다.

리액트의 특징

1. Data Flow

• 단방향 데이터 플로우를 가지고 있다.  데이터가 Tree구조에서 위 -> 아래, 부모 -> 자식의 방향으로만 흐른다.

2. Component 기반 구조

• 재사용 가능한 UI 컴포넌트로 UI를 구성한다.

3. Virtual Dom

• 실제 DOM 대신 가상 DOM을 만들어 비용을 줄인다.

4. Props and State

• Props: 부모 ⇒ 자식으로 전달되는 데이터로, 최상위 부모 컴포넌트만 props 변경이 가능하다.
• State: 동적인 데이터를 다루는 개념으로, 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적이다.

5. JSX

• HTML을 JS로 작성할 수 있는 JSX 문법을 사용한다.

6. server-side rendering

• SEO에 유리한 SSR도 지원한다.

리액트의 장점

• 가상 돔으로 앱 성능이 개선되는 효과가 있다.
• JSX를 사용해서 코드를 읽고 쓰기가 쉽다.
• client, server 모두에서 렌더링 가능(SSR 지원)
• Jest 등을 이용해 단위/통합 테스트 작성이 용이하다.
• 뷰 라이브러리이기 때문에 프레임워크와의 통합이 쉽다.
  • 뷰 라이브러리란?
    • 소프트웨어 개발에서 주로 UI(View)를 구축하고 관리하는 데 중점을 둔 라이브러리를 의미합니다. React는 "View Library"로 분류되며, 이는 특히 MVC(Model-View-Controller) 아키텍처에서 "View" 부분에 집중한다는 뜻입니다.
    • 1. UI 중심 
      •  UI 컴포넌트(버튼, 폼, 리스트 등)를 정의하고 관리하는 데 집중합니다.
    • 2. 비즈니스 로직과 데이터 관리 분리 
      • View Library는 비즈니스 로직이나 데이터 관리를 다루지 않거나 최소한으로 다룹니다. 데이터의 상태 관리나 비즈니스 로직은 일반적으로 다른 라이브러리나 프레임워크와 함께 사용됩니다.
    • 3. 선언적 프로그래밍 
      • View Library는 선언적 방식으로 UI를 정의합니다. 개발자는 UI가 어떤 모습이어야 하는지 선언하고, 라이브러리가 이를 자동으로 관리합니다. React에서는 JSX를 사용하여 UI를 정의하고, React가 상태 변화에 따라 자동으로 UI를 갱신합니다.
    • 4. 가벼운 컴포넌트 기반 
      • React 같은 View Library는 가벼운 컴포넌트 기반 구조를 가지고 있어, 애플리케이션을 작은 단위로 나누어 재사용 가능하게 만듭니다. 각 컴포넌트는 독립적으로 개발, 관리, 테스트가 가능합니다.

View Library와 Framework의 차이 

• React가 "View Library"라고 불리는 이유는 다음과 같은 이유에서입니다:
  • 경량성
    • React는 UI를 구축하고 업데이트하는 데 필요한 도구를 제공합니다. 그 외의 기능(라우팅, 상태 관리 등)은 추가적인 라이브러리로 처리합니다. 이와 달리, 프레임워크(예: Angular, Vue.js)는 애플리케이션 구조의 전반을 관리하며, 더 많은 기능을 내장하고 있습니다.
  • 유연성
    • React는 특정한 방식으로 애플리케이션을 구조화하는 것을 강요하지 않습니다. 대신, 필요한 경우 다른 라이브러리와 결합하여 사용할 수 있도록 유연성을 제공합니다. 
  • React의 기능은 UI의 렌더링 및 상태 변화에 따른 UI 업데이트에 중점되어 있습니다. 이 외의 기능들은 개발자가 선택한 추가적인 도구에 의해 처리됩니다.

• • View Library는 애플리케이션의 "View" 부분, 즉 사용자 인터페이스(UI)를 구축하고 관리하는 데 중점을 둔 도구입니다. React는 이 역할을 수행하는 라이브러리로, 가벼운 컴포넌트 기반 구조와 선언적 프로그래밍 방식을 통해 UI를 효율적으로 관리할 수 있도록 돕습니다.

리액트의 한계

• 완전한 프레임워크가 아닌 뷰 라이브러리이다.
• 웹 개발 입문자에게는 러닝커브가 있을 수 있다.
• 리액트를 기존 MVC 프레임워크에 통합하려면 몇 가지 추가 구성이 필요하다.
• 인라인 템플릿과 JSX 사용으로 코드 복잡성이 증가한다.
• 너무 많은 작은 컴포넌트들이 보일러플레이트 코드나 엔지니어링이 과해지도록 할 수 있다.

---

References

리액트(React)의 역사