[TIL] React는 무엇인가

react logo

1. React 란

◎ React는 페이스북에서 개발한 유저 인터페이스 라이브러리로서 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 해 준다.

페이스북을 비롯하여 Airbnb, Netflix, Twitter 등 세계를 선도하는 서비스들이 React를 사용하고 있다. 그중에서도 에어비앤비와 넷플릭스는 페이스북 못지않게 React를 생태계에 적극적으로 기여하고 있다.

2. Framwork? Library?

◎ React가 프레임워크인지, 라이브러리인지 헷갈려하는 개발자도 있습니다. React는 Angular 같은 Framwork가 아니라 Library이다. Router처럼 웹을 만드는 게 꼭 필요한 도구들이 기본적으로 포함되어있지 않다. 그 대신 가볍고 무엇보다 훨씬 빠르게 배울 수 있다.

3. 특징

◎ React는 다음 3가지의 중요한 특징을 지니고 있다. 이 요소들은 분리된 것이 아니라 서로 연결되면서 React를 지탱한다.

# Component

- Component는 UI를 구성하는 개별적인 뷰 단위이다. React로 개발을 한다는 것은 마치 블록을 조립해 성을 만드는 것과 같다. 전체 앱은 각 Component들이 결합해서 만들어지게 된다. 무엇보다 각 Component들은 앱의 다른 부분, 또는 다른 앱에서 쉽게 재사용이 가능하다. Redux의 창시자이며, 현재는 Facebook React Core팀의 일원인 Dan Abramov는 React의 목표가 성능보다는 유지 가능한 앱을 만드는 것에 있다고 설명한 적이 있다고 한다.

# JSX

- JSX는 Jacascript의 Syntax 확장이다. JSX를 사용하는 것이 필수는 아니지만, 사용하는것이 권장된다.

JSX는 보통 선언적이라고 번역되는, Declarative 한 개발을 도와주는 도구이다. 간단하게 말해 한눈에 이해하기 쉬운 개발을 만들어 준다. JSX는 그 형태가 마치 html과 같다. 유저에게 보여주고 싶은 최종적인 View라고 할 수 있다. 개발자는 JSX를 통해 결과물에 직관적으로 도달할 수 있고, 예측 가능한 개발을 만들어줄 뿐 아니라 유지보수 협업 등에서 엄청난 감정을 발휘한다.

import React from 'react';

function App() {
 return(
     <>
      <div>안녕하세요.</div>
     </>
  )
}

export default App;

 

JSX 규칙

1. 태그는 꼭 닫혀 있어야 한다. (input태그 사용 시 <input /> 방식으로 해야 한다.)

2. 두 개 이상의 태그는 꼭 하나의 태그로 감싸줘있어야 한다.

# Vitual DOM

- DOM은 웹의 핵심으로써, 브라우저가 화면을 그리기 위한 정보가 담겨있는 문서이다.  문제는 이 DOM을 효과적으로 다루는 것이 힘들다는 것이다. 브라우저에게 DOM을 해석하고 렌더링 하는 것은 굉장히 비싼 작업이다.

Virtual DOM은 그 작업을 미리 최적화시켜줄 뿐만 아니라, 컴포넌트 단위로 묶어서 관리할 수 있게 해 준다.

Virtual DOM은 단순한 DOM 조작 도구가 아니라 컴포넌트 단위로 움직이는 Declarative 한 개발을 구현하기 위해 도입된 것이다.

# 단일방향 데이터 흐름

- React에서는 데이터가 단일방향으로만 흐른다. 데이터 흐름을 단방향으로 제한함으로써 데이터를 추적하기 쉽고 디버깅을 쉽게 해 준다.

4. 장점

•  React는 Framwork가 아닌 Library이기 때문에 다른 프레임워크와 혼용이 가능하다.

• Javascript 객체 형태의 Virtual DOM을 사용하여 애플리케이션의 성능을 향상한다.

• Component의 가독성이 매우 높고 간단하여 쉬운 유지보수, 간편한 UI 수정 및 재사용이 용이하다.

5. 단점

• IE8 이하 지원하지 않는다.

• React는 inline-template과 JSX를 사용하는데, 일부 개발자들에게는 적응이 안될 수 도 있다.

※ 참조

- '벨로퍼트와 함께 하는 모던 리액트' 강의 정리

 

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

https://velopert.com/3612

누구든지 하는 리액트 1편: 리액트는 무엇인가 | VELOPERT.LOG