[React 되짚어보기] React란?

React란?

React 공식문서를 보면 아래와 같이 설명하고 있다.

사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리
출처 - React 공식 문서

V8 자바스크립트 엔진의 등장으로 JavaScript로 desktop APP이나 mobile APP과 유사한 UX를 제공할 수 있는 Web APP을 만들 수 있게 되었다.
또한 과거 웹 서버에서 수행되던 로직들이 클라이언트(브라우저)로 이동하면서 새로운 HTML 페이지를 server에 요청할 필요없이 사용자가 보는 HTML 구조(DOM)을 조작할 수 있게 되었다.

React.js는 이런 JavaScript의 클라이언트 사이드 라이브러리로 클라이언트 사이드 JavaScript 코드를 작성하는데 도움이 된다.

즉, React는 모던하고 리액티브한 사용자 인터페이스(UI)를 구축하게 해주는데, 그 과정에서 더 높은 레벨의 문법(syntax)를 제공한다. 이 문법을 통해 코드를 선언적(Declative)이고 컴포넌트 중심적인 방법(component-focused approach)으로 작성할 수 있게 해준다.

React 특징 3가지

1. 선언형 프로그래밍
2. 컴퍼넌트 시스템
3. 멀티 플랫폼 지원

선언형 프로그래밍

JavaScript만 사용한다면, createElement()로 요소를 생성하고 textContent로 안에 내용을 넣고, className으로 클래스를 추가하고, addEventListener()로 이벤트를 연결하고 등등... 모든 단계들이 서술되어야 한다. 이건 명령적 프로그래밍(Imperative Programming) 방식으로 단순히 이어지는 행동들을 단계별로 설명하는 방식이다. 이런 접근은 모든 핵심적인 세부사항을 처리해줘야 하고 높은 확률로 반복적인 코드들을 작성하게 된다.
하지만 React.js를 사용하면 아래와 같이 구조적으로 한 눈에 알아볼 수 있는 코드를 작성할 수 있다. < Post >라는 컴포넌트 안에 필요한 HTML 구성 요소들이 들어있고 React는 이런 컴포넌트들의 조합을 이용하는 것이다.

imoprt Post from './components/Post';

function APP(){
  return (
    <div>
    	<h1>Post Lists</h1>
    	<Post title='post title' content='post content' />
    </div>
  )
}

export default App;

React는 이처럼 작은 컴포넌트로 나누어 작업하는 방식으로 보면 된다. 각각의 컴포넌트(js, ts 등)들은 명확한 작업을 가진다.

그리고 그 코드들을 React 라이브러리가 훅 등을 이용한 선언적 코드를 해석해 화면에 랜더링한다.

즉, JavaScript에서 작성했어야했던 createElement()로 요소를 생성하는 등의 낮은 레벨의 지시사항(low level instriction)은 React에서는 직접 작성하지 않고, React 라이브러리에 의해 작성된다. 이로 인해, React를 사용하면 복잡한 사용자 인터페이스를 훨씬 더 쉽게 구축할 수 있는 것이다.

컴퍼넌트 시스템

멀티 플랫폼 지원