React.js는 어떻게 작동하는가?
바닐라 자바스크립트를 배워나가면서 웹 개발에 대한 재미를 한참 붙여나가다 보면 끊임없이 듣게 되는 이름이 있습니다. React, Vue, Angular … 바로 프레임워크들이죠. 이들은 자바 스크립트를 통해 웹 개발을 해 나가는 것을 더 쉽게 도와주는 고마운 존재들입니다. React는 페이스북, Angular는 구글, 그리고 Vue는 Evan you라는 한 개인이 만들어 관리됩니다. 웹은 어플리케이션 보다 훨씬 개방된 개발 환경이라 이렇게 다양한 주체가 프레임워크를 관리합니다.
오늘부터 그 중 가장 많이 사용되는 React에 대해서 알아보려고 합니다. 첫날인 오늘은 리엑트의 설치방법과 간단한 작동원리를 알아보겠습니다.
1. React 설치
react를 위해선 먼저 node.js와 그와 함께 설치되는 npm, npx가 준비되어야 합니다. 위 세가지는 node.js 홈페이지에서 node를 다운받으면 함께 설치됩니다. 다 설치가 되면 npx을 통해 react를 설치합니다.
npx create-react-app -name-
터미널에 위와 함께 쳐주면 설치가 됩니다. -name-에는 원하는 폴더명을 넣으시면 됩니다.
2. React의 기본 구조
react를 다운로드 하면 굉장히 다양한 파일을 받기 때문에 그 모두를 설명할 순 없습니다. 오늘은 그중 가장 중요한 것들만 살펴보겠습니다.
1) /public/index.html
먼저 public 폴더의 index.html입니다. 이 녀석은 제작한 어플의 얼굴이라고 생각하면 됩니다. 그러나 얼굴치고는 생각보다 들어있는 정보가 적습니다. 코드로 살펴보죠.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
Index.html의 body입니다. 중간에 거대한 주석을 빼면 거의 정보가 없다시피 합니다. 왜 이런 모습일까요? 바로 세번째 줄에 있는 id=root 때문입니다. 이 아이디 값이 있는 div 블록에 앞으로 react를 통해 정보를 쌓아주는 겁니다. 즉 index.html은 얼굴 마담일 뿐 실질적인 중요성은 적은 것이죠. 그럼 실제로 중요한 친구들을 살펴보죠.
2) /src/index.js
다음으로 중요하게 보이는 친구가 src폴더의 index.js입니다. 코드를 통해 살펴볼까요?
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
앞 뒤로 적힌 정보를 빼고 가운데의 render가 가장 중요합니다. 이 부분을 통해서 id값 root로 연결해 정보를 추가해 주는 역할인 것이죠. 그런데 추가될 정보가
3) /src/App.js
여기까지 오느라 수고하셨습니다. 리엑트의 실질적인 정보는 여기 App.js에서 구성이 됩니다. 물론 컴포넌트라는 좀 더 세부적인 구성요소가 있습니다. 그러나 그들이 모세혈관이라면 이 친구는 대동맥에 가까운 모든 정보의 뿌리입니다. 이 곳에서 가공되어 최종적으로 제작되는 어플을 구성합니다.
import Header from "./components/Header";
import Tasks from "./components/Tasks";
function App() {
return (
<div className="container">
<Header />
<Tasks tasks={tasks} />
</div>
);
}
먼저 기본 전달을 위해 상당량의 코드를 제거했다는 것을 알려드리겠습니다. 먼저 최상단을 보시면 컴포넌트 폴더에서 정보를 가져오는 것을 볼 수 있습니다. 모세혈관을 통해 동맥으로 연결되는 모습이죠. 그 다음은 App 함수가 구성되어 있습니다. 컴포넌트에서 받아온 자료들로 실질적인 html 형태의 정보를 구성합니다. 이런 식으로 구성된 완성품은 App.js > index.js > index.html 의 루트로 최종 결과물이 됩니다.
물론 react의 용도는 단순하게 html 블록을 구성하는 것 보다 거대합니다. 일단 오늘은 이들이 어떤 방식으로 구성되어 작동하는지를 알아보는데 초점을 맞췄습니다. 이 정보가 얼마나 유연하게 가공되고 전달이 가능한지 앞으로 천천히 알아보겠습니다.