[React] 1. 선언형

어느덧 프론트엔드 개발자로서 일한 지 만 3년 되었다.
스타트업에서 시작해 퇴사를 하고 이직을 준비하며 지난 3년간 가장 많이 써온 프레임워크인 React와 JavaScript라는 언어에 대해 내가 얼마나 이해하고 알고 있는지 스스로 생각을 많이 해보게 되었다. 많은 프로젝트를 하고 서비스 런칭을 하면서 과연 내가 얼마나 React라는 것을 잘 사용했는지 생각을 해보니 그렇지 못했던 것 같았다. 그래서 이번 기회를 통해 React란 무엇인지 어떻게 작동을 하는지 깊이 파헤쳐보고 싶어서 블로그를 시작하게 되었다.

React란 무엇인가?

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

리액트는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다. 2011년 페이스북의 뉴스피드에 처음 적용 되었다가 2012년 인스타그램에 적용되었다. 이후 2017년 4월 18일에 페이스북은 사용자 인터페이스를 위한 React 프레임워크 라이브러리 알고리즘인 React Fiber(리액트의 재조정 엔진)을 발표하였고 계속 발전중이다.
출시 이후 많은 기업 및 프론트엔드 개발자가 사용함으로써 현재 React는 웹 개발 프레임워크 점유율 1위를 유지하고 있다. 그렇다면 왜 대다수의 기업 및 개발자가 React를 사용하고 있는가?
 

React란?

우선 리액트가 가진 특징을 알아보자.

React 공식 홈페이지에 나와있는 설명이다. 위 3가지 특징중 이번 편에서는 선언형 대해 먼저 알아보자.
 

선언형이란?

선언형이란 무엇일까? 보통 선언형 프로그래밍이란 프로그램을 어떠한 방법으로 수행해야하는지를 나타내기 보다 무엇과 같은지를 설명하는 경우에 선언형이라고 한다. 프로그램이 목적지에 도달하기위해 어떻게 해야하는지를 하나씩 알려주기 보다 내가 원하는 동작이 무엇인지를 명시하는 것을 선언형 프로그래밍이라고 할 수 있다.

//명령형 프로그래밍
let array = [1,2,3,4,5];
let sum = 0;

for(let i=0; i <= array.length; i++){
	sum += array[i];
)

console.log(sum);

//선언형 프로그래밍
let array = [1,2,3,4,5];
let sum = array.reduce((acc,next) => acc + next);

console.log(sum);

위와 같이 명령형은 과정을 하나씩 작성을 하지만 선언형은 추상화된 함수를 통해 무엇을 나타낼것인지를 작성한다.
 
그렇다면 React에서의 선언형은 무엇을 뜻하는가?
React에서는 선언형 프로그래밍으로 UI를 만들때 생기는 어려움을 줄여준다. 예를 들면 <div>태그 안에 <p>태그가 있고 어떠한 내용을 가진 html을 렌더링 하려고 할때 명령형 프로그래밍 방식으로는 DOM을 생성하고 조작하는 과정을 하나하나씩 프로그램에 알려주어야 할 것이다.
하지만 React에서는 이러한 과정을 개발자가 React에게 떠넘기고 DOM을 조작할 필요 없이 단지 최종 UI 만을 선언하여 React에게 전달하기만 하면 React가 이후의 과정들을 처리하여 화면에 렌더링 하게 된다.

return (
	<div>
    	<p>Hello World!</p>
   	</div>
    )

이렇게 "선언형" 방식으로 컴포넌트를 개발하면 이후 React가 DOM에 렌더링할 책임을 가져가 렌더링을 하며 이후의 제어권을 가지게 된다(Inversion of Control). React가 제어권을 가지게 됨으로써 필요에 의해 우선순위를 지정하거나 작업의 수행을 미룰수 있게 되어 이로인해 중요한 User Event를 먼저 처리 하고 Background Task의 수행을 미룸으로써 유저 경험이나 성능상의 이점들을 가지게 된다.
또한 Virtual Dom을 통한 렌더링 최적화 작업 등등 여러가지 이점들을 React가 책임지고 제공해 준다.

이렇게 React는 UI를 렌더링 하는 라이브러리로 선언적 API를 통해 "런타임에 대한 좋은 추상화"를 제공해 줌

으로써 개발자는 컴포넌트에 대한 선언만을 제공해 주고 이후 선언의 수정 및 삭제 없이도 React 버전의 업데이트 만으로도 렌더링 성능을 향상 시킬 수 있으며 더욱 UI에 집중할 수 있게 된다.
 
다음편에서는 여기서나온 Virtual DOM에 대해 설명하고 React의 다른 특징으로 넘어가도록 하겠다.