[React.js] React를 시작하기에 앞서

 

1. 언어

React는 대부분의 소스가 JavaScript로 구성되어 있습니다. 물론 CSS나 HTML도 부가적인 요소이지만 가장 큰 비중을 차지하고 있는 것이 JavaScript입니다. 때문에 JavaScript 또는 TypeScript가 선행 과정으로 이수되어야 합니다. 

---

2. 구조

프로젝트를 생성해보신 분들도 아시겠지만 React는 웹 프로젝트 구조를 가지며, Web App Server가 npm에 내장되어 있습니다. 때문에 "npm start"라는 명령어를 통해 WAS를 구동시키게 되는 것과 같은 원리이고, 터미널이 종료된다면 WAS 또한 종료되어 웹 프로젝트가 작동을 멈추게 됩니다.

 

(생성 방법은 여기 글에 작성해두었어요.)

React 프로젝트를 생성하게되면 기본적으로 index.js 와 App.js 부분으로 나뉘게 됩니다.

한 파일을 사용해도 무방하지만 굳이 왜 이 둘을 나누어 놓았을까요?

 

아래에 적혀있겠지만 이유는 컴포넌트 기반의 아키텍처 때문입니다.

기본적으로 WAS가 실행되면 React의 메인 페이지는 index.js를 바라보게 됩니다. 

하지만 모든 소스가 index.js 내에 위치하면 결국 다른 웹페이지랑 크게 달라지는 것이 없는 전형적인 웹과 같게 될 것입니다. 기본적으로 index.js에는 다른 컴포넌트들을 담기 위한 import가 많이 생성되어 있습니다. 이 import들은 각 컴포넌트들을 index.js에서 호출해서 사용할 수 있도록 기반을 마련해주는 장치라고 생각하시면 됩니다. import와 export를 하는 방법은 차후 재작성하려고 합니다.

---

3. 사용 이유

최근에 개발되는 많은 웹 페이지는 방대한 양의 스파게티 소스가 다수입니다. React는 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위인 '컴포넌트'의 기반으로 형성된 아키텍쳐입니다. 이런 문제를 소분화하여 해결하기 위해 특화된 프레임워크라고 봐도 됩니다. 컴포넌트의 단위로 코드를 작성했을 때는 확장성과 재사용성 및 신뢰성을 높일 수 있다고 합니다.

---

4. 사용 방법

React 프로젝트는 크게 2가지의 코딩 방법이 있습니다.

1. 명령형 프로그래밍

2. 함수형 프로그래밍

 

명령형 프로그래밍은 기존의 객체지향 프로그래밍(Object Oriented Programming)과 비슷한 구조의 코딩 방법입니다.

주로 자바 언어라던지 C++과 같은 언어에서 사용하는 알고리즘이라던가 클래스를 기반으로 하는 언어를 의미합니다. 개체 형식의 동작(method)과 상태(state)를 가장 중요하게 여기면서 인터페이스나 상속 같이 전형적인 프로그래밍 방식이죠.

 

하지만 함수형 프로그래밍(Functional Programming)은 다릅니다. 이전에도 작성한 글이 있는데, 참고를 하시면 더욱 좋지만 바쁘신 분들을 위해 간단히 설명하자면 함수형 프로그래밍은 순수하게 하나의 함수(순수 함수라고도 합니다)를 호출하여 문제를 직접적으로 해결하기 위해 작성된 패러다임입니다. 즉, 하나의 문제가 주어지면 그 문제를 해결하고 소멸되는 것이므로 상태값을 지니지 않습니다. 다시 말하자면 저장소가 따로 없어 연산 및 처리 속도가 명령형 프로그래밍에 비해 굉장히 빠릅니다. 

 

초창기 JavaScript가 탄생할 시기는 명령형 프로그래밍을 주로 진행하곤 하였습니다. 하지만 많은 변천사를 거치며 JavaScript가 함수형 프로그래밍을 지원하기 시작하였고, 변수를 기반으로 하는 프로그래밍이 아닌 함수(function)을 중점적으로 다루고 필요시에 해당 함수만 호출하여 사용하는 방식으로 변경되었죠.

 

React는 JavaScript에 방대하게 의존하고 있기 때문에 이러한 두 개의 스타일을 지원합니다. 

---

5. JSX

JSX는 React에서 사용하는 것을 권고하는 자바스크립트의 확장문법입니다. 주로 웹페이지에서 자주 사용하는 템플릿엔진(Thymeleaf, Mustache)와 같은 것과 유사한 표현식인데, 자바스크립트와 HTML 문법이 혼용되어 있다고 생각하시면 됩니다. 

 

JSX를 사용하는 이유로는 HTML 친화적이기에 웹을 기본적으로 다룬 개발자라면 눈에 쉽게 익기 때문이고, Mark Up Language와 Source를 따로 분리하지 않고 UI를 작성할 수 있습니다. 또, React를 컴파일하는데에 있어서 빌드를 하지 않고 에러를 검출해내기 때문에 생산성이 증가합니다. 

 

하지만 이러한 이유로는 사실 자주 사용해왔던 jQuery를 쓰지 굳이 JSX를 쓰는 큰 메리트가 없습니다.

여기서 차이가 발생합니다. jQuery의 경우는 DOM을 기반으로 소스가 렌더링이 되기에 브라우저(클라이언트)의 연산과정이 많아집니다. 위에서 언급한 전형적인 명령형 프로그래밍의 일종인 것입니다.

 

JSX는 가상 DOM을 사용하게 되는데, 처음의 DOM Tree부터 Rendering을 하는 jQuery와는 달리 소스가 변경이 되는 한 부분만 Rendering이 됩니다. 이유는 가상 DOM 내에 기존에 화면에 그려지고 있던 모델을 그대로 가지고 있기 때문이고, 그 모델을 그대로 사용하므로 연산 속도가 상당히 빠릅니다.

 

여기까지 기본적인 React의 기본 개요를 알아보았습니다.

 

아래에 링크는 제가 React를 공부하면서 정말 도움이 많이 되었던 사이트입니다.

1. React를 배우기 전에 알아야 할 JavaScript 기초

2. React 개요

3. Web Component의 중요성

4. 가상 DOM(Virtual DOM)이란?