React란 무엇인가?

개요

 

• 리액트를 처음 다루게 되었는데 그전에 리액트가 무엇인지 이해하고 넘어가는 시간을 갖도록 한다.

 

---

 

 

Why React?

 

새로운 기술을 학습할 때는 이 기술이 어떤 철학을 가졌는지, 어떤 문제를 해결하기 위해서 만들어졌는지 이해하는 것이 중요하다.

웹 역사는 1세대부터 3세대까지 발전하는데 이러한 기술의 발전과 새로운 기술을 만들어 내는 것은 많은 자원이 투입되는 행위이다. 그럼에도 기술이 계속 발전되는 이유는 그 시대 요구조건과 해결해야 하는 것들이 복잡해지기 때문이다. 웹에서 복잡해진다는 의미는 사람들과 상호작용하며 사용자들이 원하는 기능은 많아지고 개발자들이 처리할 UI가 많아진다는 것이다. 이러한 상황에서 프론트엔드 개발자들은 기술의 한계를 느끼고 새로운 기술인 Front-end Framework을 개발하게 된다. 웹이 발전함에 따라 프론트엔드 기술은 어떤 변화를 겪었는지 알아보자.

 

1세대 프론트엔드 기술
기본적인 HTML, CSS, JavaScript로 DOM을 조작하고 이벤트를 발생시켰다.

2세대 프론트엔드 기술
웹이 발전하여 DOM의 조작이 빈번하게 발생함에 따라 jQuery 기술이 등장하게 됐다. 결국 jQuery는 DOM을 조작한다는 행위에서 벗어나지 못해서 점점 복잡해지는 환경에서 한계에 도달하게 되었다.

// Vanilla JavaScript
const div = document.getElementById('myDiv');

for(let i=0; i<10; i++) {
	const p = document.createElement('p');
    p.textContent = 'Hello World!';
    div.appendChild(p);
}

// jQuery
const div = $("myDiv");

for(let i=0; i<10; i++) {
	div.append("<p>Hello World</p>");
}

3세대 프론트엔드 기술
jQuery 한계 이후, 패러다임을 완전히 바꾸는 새로운 프레임워크를 요구하게 되었다.

Framework	Library
Angular	React
Vue

Angular
2010년 Google에서 개발한 프레임워크로 TypeScript 기반으로 매우 안정적이고 잘 설계된 구조 내에서 개발이 가능하다. 프레임워크답게 다양한 기능이 내장되어 있지만 무겁고 배우기 어렵다.

Vue
2014년 Evan You라는 개인이 개발한 프레임워크로 Angular와 마찬가지로 Vue만의 문법과 규칙이 있다. Angular와 React가 개발되고 나서 장점을 흡수해 만들었기 때문에 문법과 규칙을 쉽게 만들어서 비교적 러닝 커브가 낮다. 마찬가지로 프레임워크답게 다양한 기능이 내장되어 있다.

React
2013년 Facebook에서 개발한 라이브러리로 "지속적으로 데이터가 변화하는 대규모 애플리케이션 구축"하는 것을 목표로 개발했다. Angular, Vue 등 다른 프레임워크와는 달리 리액트는 오로지 view만을 담당하는 라이브러리이다. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(react-router-dom, redux)를 함께 사용한다.

++ (참고) 프레임워크, 라이브러리
프레임워크와 라이브러리는 기술을 분류하는 하나의 카테고리다.

	Framework	Library
공통점	다른 사람이 만들어 둔 코드
차이점	다른 사람이 만든 틀(Frame)안으로 들어가서 작업하는 것	내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것

쉽게 풀어서 설명하면 프레임 워크는 모든 환경과 도구들을 제공해주는 대신에 그것들만 사용해야 하며 해당 기술을 새롭게 익혀야 하므로 기술 활용을 하기 위한 러닝커브가 높다. 라이브러리는 목적을 위한 하나의 도구를 제공받는 것으로 우리가 원하는 내용을 선택할 수 있지만 다른 도구들을 기본적으로 제공하고 있지 않기 때문에 본인이 스스로 선택해서 조합해야 한다.

 

React를 다루면 좋은 이유

React는 자기만의 문법을 가진 Angular, Vue와 달리 자바스크립트 문법을 그대로 사용했다. 오픈소스 프로젝트이면서 페이스북의 지속적인 관리가 이루어지고 있으며 많은 사용자수를 기반으로 생태계가 활성화되어 있다. 컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있고 React Native 등의 웹이 아닌 플랫폼에서도 활용할 수 있는 기술로 확장하였기 때문이다.

 

---

 

What is React?

 

리액트는 사용자 인터페이스(UI)를 구축하기 위한 선언적이고 효율적이며 유연한 자바스크립트 라이브러리이다. 리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트 해준다는 점과 선언적인 개발이 가능하게 된다. UI를 자동으로 업데이트하는 과정에서 Vritual DOM을 통해서 최적화를 구현한다.

 

선언형

개발방식은 선언적 개발과 절차적 개발로 나눌 수 있다.

절차적 방식은 길찾기를 예시로 스타벅스를 방문하는데 다음과 같은 과정을 거친다. "신대방 삼거리역 7호선 2번 출구로 나와서 상도로 길을 따라 도보로 400m 이동한 후 삼거리에서 오른쪽으로 꺾으세요." 목적을 이루기 위해서 어떻게(How)라는 측면에 맞추어서 진행한다. 만일 목적이 제대로 이루어지지 않는 문제가 발생했다면 어떤 과정에서 문제가 생겼는지 모든 과정을 되짚어 보아야 한다. 이는 코드가 길어질수록 유지보수가 어려워진다.

function total(arr) {
  let total = 0;
  for(let i=0; i<arr.length; i++){
    total += arr[i];
  }
  return total;
}

선언적 방식은 "스타벅스 주소는 서울 동작구 상도로 xxx 입니다"와 같이 선언하는 것이다. 무엇이 되면 되는지 우리가 원하는 최종을 선언하고 리액트에게 전달하면 어떻게 해야 하는지는 리액트에서 알아서 처리한다. 개발과정에서도 최종 결과물이 어떻게 되는지에 대한 부분에만 신경 쓰면 되기 때문에 선언적 방식이 개발할 때 훨씬 편리하다.

function add(arr) {
    return arr.reduce((prev, current) => prev + current, 0);
}

 

Virtual DOM

리액트가 화면을 업데이트 하는 과정을 조금 더 효율적으로 수행하기 위한 기술이다. 자세히 말하자면 DOM을 반복적으로 직접 조작하면 그만큼 브라우저가 렌더링을 자주 하게 되고, 그만큼 PC 자원을 많이 소모하게 되는 문제를 해결하기 위한 기술이다.

예시로 좌측의 경우는 필요할 때마다 요청을해서 창고를 3번이나 가는 비효율적인 상황이고, 우측의 경우는 Virtual DOM이 계산을 하고 정리된 요청을 하여 창고를 한 번만 가는 경우이다.

 

---

 

Node & NPM

Node
자바스크립트 실행환경으로 자바스크립트 코드는 따지고 보면 단순한 텍스트의 나열이다. 이 텍스트들이 의미를 가지려면 자바스크립트 코드를 읽어서 실제로 실행시킬 수 있는 도구들이 필요하다. 이렇게 자바스크립트를 읽어서 실행할 수 있는 도구들을 자바스크립트 실행환경 이라고 한다. 가장 유명한 자바스크립트 실행환경으로는 '브라우저'가 있다.
웹 개발 시장이 커지고 자바스크립트를 다룰 수 있는 개발자가 늘면서 브라우저가 아닌 다른 환경에서도 자바스크립트로 개발하고 싶은 니즈가 생겼고, 이러한 니즈에서 탄생한 것이 Node이다. Node는 브라우저 밖에서도 자바스크립트를 실행할 수 있게 만드는 자바스크립트 실행환경이고 자바스크립트의 탈웹을 이뤄낸 도구라는 평가를 받고 있다.

NPM
Node Package Manager의 약자이다. 패키지는 노드를 실행할 수 있는 하나하나의 프로그램을 일컫는다. 우리가 배우는 React, Babel, WebPack 등이 모두 하나하나의 패키지이다. 이를 토대로 NPM을 해석하면 노드를 실행할 수 있는 여러 패키지들을 다운로드, 업데이트, 삭제할 수 있는 매니저의 역할을 하는 도구인 셈이다.

 

---

 

Component

재사용 가능한 각각의 독립된 모듈을 의미한다. 재활용 가능한 UI 구성단위, 즉 컴포넌트 단위로 UI를 구성할때의 장점으로는 코드 재활용성이 증가, 코드 유지보수가 용이, 해당 페이지가 어떻게 구성되어 있는지 파악 용이하다.

Class Component
초기에 많이 사용되던 컴포넌트 형태로 함수형에 비해 문법과 사용법이 복잡하다. 하지만 클래스형으로 작성되어 있는 기존 코드들도 많이 남아있기 때문에 읽고 해석할 수 있어야 한다.

Function Component
클래스형 컴포넌트에 비해 간단하고 단순하다. 초창기에는 state를 관리하지 못한다는 단점으로 인해 잘 사용되지 않았다. React 16.8 버전에서 hooks라는 기능이 추가되면서 state를 잘 관리할 수 있게 되어서 그 후로 자주 사용되고 있다.

 

---

 

JSX(JavaScript Syntax Extension)

자바스크립트 확장 문법으로 자바스크립트와 HTML을 합쳐놓은 듯한 형태이다. 마크업을 편리하게 작성하기 위한 문법으로 HTML에서 마크업 하고, 자바스크립트에서 로직을 연결하고 붙이는 과정을 하나의 자바스크립트 파일 내에서 편리하게 처리할 수 있다. JSX로 작성한 코드는 자바스크립트가 인식할 수 없는 문법이기에 Babel이라는 패키지를 이용해서 변환해줘야 한다.

// 아래 문구를 작성하면
<div>Hello World</h1>

// Babel은 아래처럼 해석한다.
React.createElement('div', null, "Hello World")

장점
HTML tag를 그대로 사용하기 때문에 익숙하며, HTML 마크업과 JavaScript 로직을 같이 구현할 수 있다. 또한 JavaScript 문법을 이용해서 HTML을 생성할 수 있으며 기존의 DOM+Event 방식보다 훨씬 간편하게 UI를 구성할 수 있다.

특징
하나의 부모 태그를 가지며 모든 태그가 셀프 클로징이 가능하다.

function Login() {
	const notify = () => alert("Hello");
    
    return <h1 onClick={notify}
    style={ // 자바스크립트 사용 중괄호
    	{ // 객체 사용 중괄호
        color: "red"
        }
    }
    >Login
    </h1>
}