리액트의 배경
웹 역사에서 중요한 해였던 1995년 Java, PHP, Ruby 같은 언어들이 세상에 등장했고,
웹 서버 프로그램인 아파치도 탄생했습니다. 그리고, 이 해에 자바스크립트가 만들어졌습니다.
Netscape에서 시작된 자바스크립트는 웹을 더 살아있는 공간으로 만들고 싶었습니다.
자바스크립트는 처음부터 거대한 목적을 가진 언어는 아니었습니다.
프로그래머가 아닌 사람도 버튼을 누르면 경고창을 띄울 수 있는 간단한 기능을 위해 고안된 도구였습니다.
당시 웹은 거의 고정된 문서였으므로, 아주 간단한 상호작용이면 충분했던 것입니다.
시간이 흐르며, 웹 사이트 수는 급격히 늘어났고, 2005년 웹을 바꾸어 놓은 2가지가 탄생했습니다.
첫번째는 AJAX입니다. 새로운 내용을 볼 때, 페이지의 일부만 바꿀 수 있게 되었습니다.
AJAX의 목적은 사용자에게 빠르고 부드러운 경험을 제공하자는 것이었습니다.
두번째는 JQuery입니다. 당시에는 브라우저마다 자바스크립트 지원 방식이 달랐습니다.
JQuery는 어떤 브라우저에서도 같은 코드가 작동하도록 해주었습니다.
게다가 긴 코드를 몇 줄로 줄여주면서 폭발적인 인기를 얻었습니다.
JQuery의 목적은 웹 개발을 더 쉽고 빠르고 안정적으로 하자는 것이었습니다.
하지만 웹은 더 큰 변화를 맞는데, 단순히 웹은 정보를 보여주는 공간을 넘어 대규모 애플리케이션이 되기 시작했습니다.
페이스북을 떠올려보면, News Feed에 새로운 글이 올라오고, 알림이 울리고, 메시지가 오고, 좋아요 숫자가 바뀌는 등
수많은 변화가 동시에 일어납니다. 그래서 2010년 전후로 AngularJS 같은 프레임워크 시대를 맞게 됩니다.
프레임워크는 복잡해진 코드를 정리하고, 구조를 잡아주는 큰 틀을 제공했습니다.
단순히 정보 전달 공간이 아니라 기업의 핵심 서비스로 자리잡았기 때문입니다.
즉 웹은 읽는 공간에서 돈을 버는 플랫폼으로 바뀌었고, 그에 맞는 체계가 필요했던 것입니다.
AngularJS의 목적은 대규모 서비스 개발을 가능하게 하자는 것이었습니다.
하지만 이것도 복잡했고, 특히 화면과 데이터를 일관되게 유지하는 상태관리 문제는 완전히 해결하지 못했습니다.
이런 상황에서 2013년, 페이스북이 내놓은 해법이 바로 React Library입니다.
이것은 단순한 또 하나의 라이브러리가 아니라, 페이스북 내부에서 발생한 실제 문제를 해결하기 위해 고안된 것이었습니다.
뉴스 피드처럼 초당 수많은 변화가 일어나는 화면들을 기존 방식으로는 효율적으로 관리하기 어려웠던 것입니다.
리액트의 특징
1. 컴포넌트(Components)
애플리케이션을 작은 조각 단위로 나누어 관리하는 방식입니다.
버튼 하나, 댓글 하나, 게시물 하나 등이 모두 독립적인 컴포넌트가 됩니다.
목적은 코드를 재사용 가능하게 하고, 유지보수를 쉽게 하자는 것이었습니다.
2. 상태 관리(State Management)
웹은 이제 끊임없이 변하는 데이터로 가득합니다.
React는 상태라는 개념을 중심으로, 화면과 데이터를 항상 일치시킵니다.
목적은 끊임없이 변하는 데이터를 일관성있게 다루자는 것이었습니다.
3. 가상 돔(Virtual DOM)
예전 방식은 DOM을 직접 수정해야 하여 성능이 느려졌습니다.
React는 Virtual DOM을 도입해 꼭 필요한 부분만 효율적으로 업데이트했습니다.
목적은 성능을 최적화하면서도 변화에 빠르게 대응하자는 것이었습니다.
4. 선언형 프로그래밍
과거에는 버튼을 누르면, 이 요소를 찾아라 -> 내용을 지워라 -> 새 텍스트로 넣어라 라고 하나하나 지시해야 했습니다.
하지만 React에서는 이 버튼이 눌리면, 리스트가 보이는 상태여야 한다 라고만 선언하면 됩니다.
목적은 개발자가 원하는 결과를 선언하면 나머지는 시스템이 처리하게 하자 였습니다.
React 환경 셋팅의 이유
React로 만든 최종 결과물은 HTML, CSS, JS이지만, 개발 과정에서 JSX 문법을 사용한다는 점에서 다릅니다.
JSX는 HTML처럼 보이지만, 사실은 자바스크립트 코드와 섞여있는 문법입니다.
또, React는 최신 자바스크립트 문법을 많이 사용하지만, 문제는 브라우저가 JSX와 최신 문법을 이해하지 못합니다.
그래서 Babel이라는 번역기가 필요합니다. Babel은 JSX와 최신 자바스크립트 문법을 옛날 자바스크립트 코드로 바꿔줍니다.
여기에 더해서, React 파일은 여러 파일로 늘어나는 경우가 많아 이걸 하나로 묶어 브라우저가 읽을 수 있게 하려면
Webpack 이라는 도구(번들러)가 필요합니다.
그리고, 이 모든 과정을 실행하려면, Node.js라는 자바스크립트 실행 환경이 필요합니다.
Node.js에는 NPM이라는 도구가 함께 따라오는데
Babel이나 Webpack 같은 필요한 도구들을 자동으로 설치하고 관리해줍니다.
즉, React는 혼자 쓰이지 않고 Babel, Webpack, Node.js, NPM 등 여러 도구와 함께 움직입니다.
리액트의 환경 셋팅 - script 태그로 불러오기
HTML 파일에 React와 React-Dom 그리고 Babel을 직접 스크립트 태그로 불러오는 방법입니다.
이 방법은 빠르고 간단하지만, 실제로는 거의 쓰이지 않습니다.
이 방법의 예시로, Node.js와 Express로 서버 환경을 구성해 React를 실행해보겠습니다.
서버(Server)는 간단하게 말해서 웹 브라우저에서 주소를 입력하면 그 요청에 따라 적절한 파일을 응답합니다.
먼저, 프로젝트 폴더에 server.js 파일을 만들고, Express 코드를 작성하겠습니다.
const express = require('express')
const path = require('path')
const app = express()
const PORT = 3000
app.use(express.static(path.join(__dirname, "public")))
app.listen(PORT, () => { console.log('server is running at localhost:3000') })그다음으로 프로젝트 폴더에 public 폴더를 만들고, 그 안에 index.html 파일을 다음과 같이 작성합니다.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>Hello React With Babel</title>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin />
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin />
<script src="https://unpkg.com/@babel/standalone/babel.min.js" />
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const element = <h1>Hello, React with Express and Babel</h1>
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(element)
</script>
</body>
</html>여기서 Babel은 우리가 JSX 문법을 쓸수 있게 도와주는 자바스크립트입니다.
추가적으로 react.development.js는 컴포넌트를 만들고 상태 관리하는 것을 도와줍니다.
react-dom.development.js는 화면(DOM)에 랜더링하는 것을 도와줍니다.