React.js 는 어떤것인지요?

Question

안녕하세요. 오랜만에 웹 프로그래밍을 해야 할 일이 생겼습니다.

이전에 여러 프로젝트를 해올 때 node.js , Bootstrap, Jquery, Express, Mysql, OracleDB, mongoDB 이 정도만 가지고 주로 개발을 해왔습니다.

요즘 Vue, Angular, React를 사용하는 것이 대세인 것처럼 느껴집니다.

여기서 위 세 가지는 프론트엔드 프레임워크라고 알고 있는데, 정확히 어떤 역할을 하는건지 궁금합니다.

보통 node.js 서버에 Bootstrap으로 UI를 만들고 jQuery로 Ajax나 이벤트처리를 하는데 그럼 위 3가지 프레임워크를 사용한다는것은 어떤의미를 갖는것인지요?

위 스택들중 어떤것을 대체할 수 있는건지요?

감사합니다.

Answer 1

jQuery를 이용해 AJAX 를 이용했다면 멀티페이지 애플리케이션으로 개발했겠군요. 화면의 기능이 바뀌면 다른 HTML 파일로 이동하고 그 화면 내에서의 데이터 변화는 ajax를 이용하는 방식이죠. 다음 그림처럼요.

jQuery를 이용한 MPA(Multi Page Application)으로도 애플리케이션을 작성하는데 문제는 없지만 개발과 사용자 경험 측면에서 몇가지 문제점이 있습니다.

개발 측면에서는 먼저 성능 문제를 얘기할 수 있습니다. 요즘은 웹화면에서도 다양하고 복잡한 기능을 수행합니다. 화면 내에서 데이터의 변화속도가 대단히 빨라지고 있어서 빠른 렌더링 속도가 요구되는 경우도 많습니다. jQuery로는 이러한 요구사항을 만족시키기 어렵습니다. jQuery로는 UI와 자바스크립트 코드가 분리되지 못하고 스파게티 코드가 되는 경우가 많고, HTML DOM을 직접 핸들링하기 때문에 렌더링 성능이 많이 떨어져요.

두번째 문제로는 사용자 경험의 문제입니다. 화면 전환시에 페이지를 이동하기 때문에 화면의 전환이 일어나면서 새로운 HTML, css, image, javascript 코드를 새롭게 내려받아야 합니다. 그리고 화면의 렌더링이 새롭게 일어나죠. 이 때 브라우저 화면은 깜빡거리면서 전환되겠지요. 하나의 애플리케이션을 이용하는게 아니라 이질적인 다른 애플리케이션을 실행하는 듯한 느낌입니다.

세번째로는 Rendering 과정에 대한 겁니다. 자바스크립트로 렌더링할 때 변경된 부분만 렌더링하도록 최적화를 해야하는데 이것이 힘들다는 것입니다. 그래서 jquery로 개발할 할 때, 낮은 성능을 보이는 화면을 많이 개발하곤 합니다. 이 이유는 자바스크립트의 실행은 그럭저럭 빠른데, 이 코드가 브라우저의 DOM(HTML DOM)을 핸들링할 때 느려지는 것이 이유입니다. 이 부분에 대해서는 '브라우저 repaint, reflow'라는 키워드로 구글링해보시기 바랍니다. 어쨌든 이러한 문제로 개발자가 직접 렌더링을 최적화하도록 개발해야 하는데(정확하게 변경된 부분을 찾아서 렌더링하도록...) 이게 쉽지 않습니다.

그래서 등장한 것이 SPA(Single Page Application)입니다. SPA는 단하나의 HTML 내에 여러개의 화면을 내장하고 있는 앱입니다. 따라서 화면의 전환시에 페이지 이동이 일어나지 않습니다.

하지만 SPA도 몇가지 문제점이 있습니다. 여러 화면이 있으니 URI 경로에 따라 서로 다른 화면이 나타나도록 제어해야 하는데 이것을 개발자가 직접 하기가 쉽지 않습니다. 또한 여러화면을 제어해야 하니까 굉장히 복잡한 자바스크립트 코드가 작성되어야 하지요.

이런 이유로 Front-end Application Framework 들이 등장했습니다. Angular, React, Vue 등이 바로 그것입니다.모두 SPA 앱을 개발하기에 최적화된 프레임워크 들입니다. 컴포넌트단위로 파일을 분리하여 개발하고 모듈시스템을 이용해 컴포넌트를 참조하고 조합하여 화면을 만듭니다. 또한 URI 경로에 따라 화면을 부드럽게 전환하기 위해 라우팅(Routing)기능을 제공하는 라이브러리를 사용하거나 프레임워크 내부에 내장하고 있습니다. 여러 화면이 다루는 데이터를 중앙집중화하여 관리하기 위해 상태 관리 기능을 내장하고 있거나 라이브러리 를 참조하여 사용합니다.

또한 React와 Vue의 경우는 가상 DOM(VIrtual DOM)이라는 것을 사용합니다. 개발자가 작성한 렌더링 코드는 가상 DOM을 변경합니다. 가상DOM이 변경되면 이전 가상DOM의 정보와 현재 가상 DOM의 정보를 비교하여 차이나는 부분만을 HTML DOM에 업데이트하는 것입니다. Angular는 '변경 탐지(Change Detection)'이라는 기법을 사용합니다. 그 기법이 무엇이든 브라우저의 렌더링 과정을 최적화하려는 노력입니다. 이 3가지가 프론트엔드 쪽의 최신 트렌드입니다.

이런 프레임워크를 사용하면 jQuery로는 하기 힘들었던 SPA 개발이 손쉽게 가능해집니다. 특히 요즘은 하이브리드앱이 대세인데 이를 위해서도 SPA 구조를 많이 이용합니다.

결론적으로 jQuery + Bootstrap 조합을 React, Vue, Angular가 대체한다고 생각하시면 됩니다.

이중 React는 Facebook에서 만든 UI를 작성하기 위한 Library이자 Framework입니다. 자바스크립트 코드로 UI를 작성한다는 특징이 있습니다. UI 템플릿을 별도로 사용하지 않고 JSX라는 구문으로 작성합니다. 앞에서 답변하신 분 중 소스코드를 올리신 분이 계신데 그 코드의 render() 메서드 내부의 return문을 살펴보세요. HTML 처럼 보이지만 사실은 이것이 자바스크립트 확장 코드입니다. JSX를 자바스크립트 코드로 변환한 후에 실행하게 됩니다.

Answer 2

일단 제가 공부중에 사용하던 예제입니다

import React, { Component } from 'react'; import PhoneForm from '../components/PhoneForm'; import PhoneInfoList from '../components/PhoneInfoList'; import Layout from '../components/Layout'; class Info extends Component { id = 2; state = { information: [ { id: 0, name: '김민준', phone: '010-0000-0000', }, { id: 1, name: '홍길동', phone: '010-0000-0001', }, ], keyword: '', }; handleChange = e => { this.setState({ keyword: e.target.value, }); }; handleCreate = data => { const { information } = this.state; this.setState({ information: information.concat({ id: this.id++, ...data }), }); }; handleRemove = id => { const { information } = this.state; this.setState({ information: information.filter(info => info.id !== id), }); }; handleUpdate = (id, data) => { const { information } = this.state; this.setState({ information: information.map( info => id === info.id ? { ...info, ...data } // 새 객체를 만들어서 기존의 값과 전달받은 data 을 덮어씀 : info, // 기존의 값을 그대로 렌더링 ), }); }; render() { const { information, keyword } = this.state; const filteredList = information.filter( info => info.name.indexOf(keyword) !== -1, ); return ( <Layout> <div className="container"> <div className="inner"> <article id="info"> <span className="sTop"> <h1>INFO</h1> </span> <span className="sMiddle"> <div className="infoInput"> <PhoneForm onCreate={this.handleCreate} /> <p> <input placeholder="검색 할 이름을 입력하세요.." onChange={this.handleChange} value={keyword} /> </p> <hr /> </div> <PhoneInfoList data={filteredList} onRemove={this.handleRemove} onUpdate={this.handleUpdate} /> </span> </article> </div> </div> </Layout> ); } } export default Info;

<layout> 내에 보시면 일반 html처럼도 보이지만 내부에 value="0" 이런식이 아니라 value={} 이런식으로 값이 들어가며 class도 className등 바뀐 점이 많아서 파악하는데 좀 걸렸는데요

react의 장점은 컴포넌트에 변화가 생기면 전체를 랜더링하는게 아니라 딱 그 부분만 바꿔줌으로써 성능을 향상 시킨 프레임워크입니다.

style을 넣는 부분도 많이 다르지만 익숙해지면 금방할것같습니다.

기본으로 node.js에서 작동을 하며

next.js , creat-react-app 등의 서버 사이드 프레임워크를 설치하여 사용이 가능합니다. express도 임포트 해서 사용합니다.

저는 그중에 next.js를 사용 중이고요

위에서 대체할만한 건 없습니다

nodejs 환경에서 express도 가져다 쓰고 원한다면 bootstrap jquery도 가져다 쓸 수 있는 것으로 알고 있습니다.

몽고 디비나 mysql은 디비 개념이라 다르고요.. 굳이 말하자면 nodejs(nextjs(react)) 이 정도 느낌이네요

예를 들어 php에서 코드 이 그 나이 터 나 라라벨? 을 가져다 쓰는 느낌입니다.

Answer 3

Q: 요즘 Vue, Angular, React를 사용하는 것이 대세인 것처럼 느껴집니다.

여기서 위 세 가지는 프론트엔드 프레임워크라고 알고 있는데, 정확히 어떤 역할을 하는건지 궁금합니다.

A:
+ React: 웹 어플리케이션의 UI 단을 만들기 위해 사용되는 프레임워크입니다. UI 단과 관련된 기능들만 제공합니다.
+ Angular: 자바스크립트 어플리케이션을 만들기 위해 사용되는 프레임워크입니다. UI단(presentional logic) 뿐만 아니라 데이터를 다루는 부분(business logic)도 작성할 수 있습니다. 또한 프론트엔드에만 국한되지 않고, 많은 포지션에서 사용할 수 있습니다(NgModule이라는 Angular 만의 모듈로 추상화의 끝판왕을 보여줍니다. DI가 그렇게 편하더군요.).
+ Vue: 웹 어플리케이션을 만들기 위해 사용되는 프레임워크입니다. persentional logic 과 business logic, 둘 다 작성할 수 있게 틀을 마련해 줍니다. 여담으로, Angular보다 익히기 쉽습니다(읽어야 할 문서가 상대적으로 적습니다.)

Q:
보통 node.js 서버에 Bootstrap으로 UI를 만들고 jQuery로 Ajax나 이벤트처리를 하는데 그럼 위 3가지 프레임워크를 사용한다는것은 어떤의미를 갖는것인지요?

A:
jQuery는 라이브러리인 반면, Vue와 Angular는 프레임워크이기 때문에 거대한 어플리케이션을 만들 때 개발자가 고려해야 하는 문제들이 상대적으로 줄여줍니다.
React 같은 경우는, jQuery 와 같은 라이브러리로 Real DOM 을 다루면서 생긴 퍼포먼스 저하 같은 문제를 해결해줄 뿐더러 컴포넌트라는 개념을 통해 계층적이면서 재사용성이 높은 웹 어플리케이션을 작성할 수 있게 해줍니다(Vue나 Angular도요.).

Q:
위 스택들중 어떤것을 대체할 수 있는건지요?

A:
위 세 프레임워크는 위 스택 중 어떤 하나를 대체하기 위해 만들어진 게 아닙니다.
다만 위 세 프레임워크를 쓰신다면, Jquery가 설 자리가 없어지게 됩니다(또는 엄청 좁아집니다).