[Pro react] 1장. 리액트의 정의

09 Jun 2021

리액트의 정의

리액트는 자바스크립트와 (필요에 따라) XML을 이용해 조합형 사용자 인터페이스를 구축하는 엔진이다.

리액트는 엔진이다: 리액트 사이트에서는 리액트를 라이브러리라고 정의하고 있지만 필자는 리액트의 핵심 장점 중 하나인 반응형 UI렌터링을 잘 나타내는 “엔진”이란 용어를 선호, 이 방식은 사용자에게 제공되는 UI로 부터 상태(특정 시점에 애플리케이션을 정의하는 모든 내부 데이터)를 분리한다. 리액트를 이용해 상태가 DOM의 시각 요소로 표현되는 방법을 선언하면 이후에는 DOM이 상태 변경을 반영해 자동으로 업데이트 된다.
조합형 사용자 인터페이스를 구축한다: 리액트의 핵심 개념은 사용자 인터페이스의 생성과 유지 관리의 복잡성을 줄이는 것이다. 이를 위해 UI를 컴포넌트(재사용, 확장, 유지 관리하기 쉽고 특정 목적을 가진 독립형 구성요소)로 분리하는 개념을 받아 들였다.
자바스크립트와 (필요에 따라)XML을 이용한다 : 리액트는 브라우저, 서버, 모바일 장치에서 이용할 수 있는 순수 자바스크립트 라이브러리다. 그런데 1장에서 살펴보겠지만 리엑트에는 XML을 이용해 UI를 기술하는 선택적인 구문이 포함돼 있다. XML은 선언적이며 손쉽게 요소 간의 관계를 파악하고 UI의 전체 구조를 시각화할 수 있다.

자바스크립트 MVC프래임워크는 이미 많이 나와 있다. 그렇다면 페이스북이 리액트를 개발한 이유, 그리고 여러분이 이를 이용하려고 하는 이유는 무엇인가?

편리한 반응형 렌더링 (SPA)가 등장 전, 항상 완전히 새로운 페이지를 서버로부터 전송해야 했다. 이 방식은 사용자 관점에서는 형편없는 경험을 제공했지만 개발자는 특정 상호작용이나 특정 시점에 사용자에게 보여줄 내용을 아주 쉽게 계획할 수 있다.

리액트가 나오기전, 데이터 바인딩을 이용하기도 했지만, 관리성, 확장성, 성능 면에서 단점이 있었다.

반응형 렌더링은 기존 데이터 바인딩보다 사용하기 쉽다. 개발자가 컴포넌트의 모양과 동작을 선언식으로 정의하면 리액트가 데이터 변경을 감지하고 개념상으로 전체 인터페이스를 다시 렌터링한다.

그런데 상태 데이터가 변경될 때마다 실제로 전체 인터페이스를 다시 렌더링하는 것은 성능 저하를 감안할 때 불가능하므로 리액트는 “가상DOM”이라고 하는 DOM의 인-메모리 경량 표현 을 이용해 작업한다.

순수 자바스크립트를 이용한 컴포넌트 기반 개발 리액트 애플리케이션의 모든 부분을 특정 목적을 가진 독립형 구성요소인 컴포넌트로 구성된다. 컴포넌트를 이용해 애플리케이션을 개발하면 특별히 복잡한 부분이 없는 경우 “분할 정복” 방식을 적용할 수 있다. 리액트는 완전한 기능을 갖춘 프로그래밍 언어를 이용하므로 추상화를 구축하는 데 큰 장점이 있다.
문서 모델의 유연한 추상화 리액트는 기반 문서 모델을 추상화하는 UI의 경량 표현을 자체적으로 갖추고 있다. 이 방식의 가장 주요한 장점은 웹용 HTML을 렌더링할 때는 물론 네이티브 iOS와 안드로이드 뷰를 렌더링할 때도 동일한 원칙을 적용할 수 있다는 것이다. 또한 이 추상화는 다른 두 가지 흥미로운 요점과 연관돼 있다.
- 이벤트가 모든 브라우저와 장치에서 자동으로 위임을 이용해 일관되고 표준을 준수하는 방식으로 작동한다.
- 리액트 컴포넌트를 서버에서 렌터링해 SEO와 체감 성능을 개선 할 수 있다.

class Hello extends React.Component {
  render(){
    return(
      <h1>Hello World</h1>
    )
  }
}

가장 기본적인 시나리오에서도 다음과 같은 작업이 가능한 개발 워크플로가 필요하다.

이를 위해 리액트 프로젝트의 기본 프로젝트 구조에는 다음과 같은 항목이 포함된다.

모든 자바스크립트 모듈을 포함하는 소스 폴더
index.html 파일. 리액트 어플에서 HTML페이지는 거의 비어 있는 경우가 많다. 이 페이지는 애플리케이션의 자바스크립트를 로드하고 리액트에서 애플리케이션의 컴포넌트를 렌더링하는 데 이용하는 div(또는 다른 요소)를 제공하는 역할
package.json파일은 표준 npm 매니패스트 파일이며, 프로젝트 이름, 설명, 개발자 등과 같은 프로젝트에 대한 다양한 정보를 포함
모듈 패키지 또는 빌드 도구, JSX변환과 모듈/의존성 번들 작업에 이용된다. 모듈은 코드를 각기 다른 의존성을 선언하는 여러 파일로 분할 함으로써 자바스크립트 코드를 정리하는 데 도움을 준다.