[React] React에 대한 설명

리액트는 UI 제작을 위한 자바스크립트 라이브러리 중 하나로, 웹이나 앱 등 다양한 분야의 UI 개발에 사용될 수 있다. 

공식 사이트에서는 해당 라이브러리의 특징을 아래와 같이 설명한다.

Declaratives

프로그래밍 패러다임 중 하나로, 특정 프로그램의 동작을 수행하기 위한 Control flow나 logic 부분은 추상화하고, 대신에 프로그램에 대해 요구되는 결과가 무엇인지를 명시하는 방식으로, imparative의 개념과 반대된다.

예를 들어 택시를 통해 63빌딩에 가는 상황을 생각해보자.

Imparative 방식은 도달하는 방법 자체에 초점을 맞춘다. 따라서 우리는 택시 기사에게 "100 미터 앞에서 우회전을 한 뒤에 1시 방향으로 500m를 가서 ..." 와 같이 특정 조건이나 루틴을 설명할 수 있다.

반면 Declarative 방식에서는 결과 자체에 초점을 맞춘다. 따라서 우리는 택시 기사에게 "63 빌딩으로 가주세요" 라고 말할 수 있다. 이 경우 63빌딩에 "어떻게" 가야 하는지 같은 정보는 전혀 필요하지 않다.

자바스크립트 코드로 생각하면 다음에 대응된다.

let arr = [a,b,c,d,e]
//01. Imperative 방식
let str1 = "";
for(let i = 0; i < arr.length; i++)
{
	str1 += arr[i];
}

//02. Declarative 방식
let arr2 = arr.reduce((bef,elem) => bef + elem, "");

 

이런 특성처럼, 리액트는 control flow에 집중하지 않는다. 예를 들어 특정 동작에 대해 우리가 DOM을 일일이 관리해야 한다면 어떨까? button을 누르면 특정 div를 hidden으로 바꾸도록 if문을 또 일일이 작성하고 ... 지겨울 것이다. 리액트의경우 특정 조건에서 어떻게 DOM을 다뤄야 하는지에 대한 정보를 알려주지 않는다. 이런 작업은 리액트 라이브러리 자체가 수행하기 때문에 프로그래머는 어플리케이션의 작성에만 집중할 수 있는 장점이 있다.

Component 

리액트는 컴포넌트 기반으로 동작한다. 컴포넌트는 리액트의 UI를 구성하는데 사용될 수 있는 작은 단위의 자바스크립트 코드로, 프로그래머는 작은 단위로 선언된 컴포넌트를 재사용함으로써 쉽게 유지보수할 수 있다는 장점이 있다. 이때 중요한 것은 컴포넌트는 "자바스크립트" 코드라는 사실이다. 이후 JSX와 함께 이에 대해 설명한다.

react & react-dom

리액트를 웹에서 사용하는 경우, 보통 npx create-react-app <name>명령을 이용한다. 해당 명령을 이용하면 다음 dependency를 가진 npm 프로젝트가 생성된다.

이때 @testing 파일 및 web-vitals 는 성능 측정 및 테스팅에 사용되는 것이므로 넘어가고, 나머지에 대해 살펴보자.

• react : 컴포넌트 생성과 관련된 라이브러리
• react-dom : react에서 만들어진 컴포넌트를 웹 DOM이나 서버에서 사용하기 위한 라이브러리
• react-script : create-react-app에 의한 최적화 등 코드가 들어있는 라이브러리

기본적으로 react 라이브러리 자체만으로는 웹 상에서 사용할 수 없는데, 해당 라이브러리는 컴포넌트를 만들고 이들을 자바스크립트 코드로 구현된 virtual DOM에서 관리하는 기능만 가질 뿐, 이들을 웹 상에 존재하는 DOM과 대응시키는 기능까지 가지지는 못하기 때문이다. 

https://ko.reactjs.org/docs/faq-internals.html#gatsby-focus-wrapper

따라서, react의 virtual DOM에서 관리하는 컴포넌트들을 실제 웹이나 앱 등에 대응시키기 위해서는 해당 환경과 상호작용하는 인터페이스가 따로 필요한데, 웹 상에서는 이 역할을 react-dom 이 수행하고 있다.

react-dom과 SPA

index.js

많은 프로젝트에서 시작 파일의 이름을 index.js로 정의하는 경우가 많다. 리액트 역시 시작 파일의 이름을 그렇게 정의한다. 이때 해당 파일 내부에는 기본적으로 위와 같이 정의되어 있다.

이때 내부에서 실제로 작동하는 코드는 ReactDOM.render 하나뿐이다. 

ReactDOM.render(component, target);

render 메서드는 우리가 정의한 컴포넌트를 입력받아 html 상의 target에 출력하는 기능을 수행한다.

target은 웹 상에 존재하는 element로, virtual DOM의 인터페이스가 반영된다. 따라서, 리액트로 생성되는 페이지는 기본적으로 body 태그 아래에 있는 단일 div 하에서 정의된다. (Portal을 통해 다른 곳에 출력할 수도 있다)

root 하에 내용이 정의된 모습

 

개인적으로 SPA 기반이 아닌 방식을 사용하다가 리액트를 처음 접했을 때 헷갈렸던 부분은 html 파일을 만들지 않는 부분이었다. 예를 들어 C# 진영의 razor이나 express + ejs 등 기본적으로 single page 기반이 아닌 경우 각 페이지에 해당하는 파일을 따로 할당해야 한다. 따라서 이들은 필연적으로 각각의 페이지에 대응되는 파일을 가지게 된다. 그러나, 리액트는 Single Page Application으로, 하나의 html 파일만 가진다.

해당 파일은 public 폴더 내부에 존재하며, body에는 id가 root인 div tag 하나밖에 없다. 위에서 봤던 render 메서드를 통해 이 div 파일에 virtual DOM에서 업데이트 되는 사항을 이 엘리먼트에 반영하는 방식으로 작동하기 때문에, 하나의 html 파일만을 사용하게 된다.

 

결론

리액트는 컴포넌트 기반으로 UI를 구성하기 위한 자바스크립트 라이브러리이다. 웹 프론트엔드에서는 컴포넌트 생성과 관련된 react 라이브러리와, 렌더링을 수행하는 react-dom 라이브러리를 조합하여 사용하게 된다.

웹 상에서 리액트는 Single Page Application으로 동작하기 때문에 하나의 html 파일만을 사용하며, render의 기본 엔트리는 <div id = 'root' ></div> 이다.