What is React?
A JavaScript library for building user interfaces
Javascript의 등장으로 DOM 요소를 조작할 수 있게 됨에 따라, 서버와 새로운 html을 주고 받는 통신 없이도 사용자에게 동적인 화면을 보여줄 수 있게 되었다. 이 덕분에 reactive web app과 SPA(single page app)라는 개념이 생겨났다.
+) reactive web app | 사용자의 요청에 버벅거림이나 깜빡임 없이, 빠르게 반응하는 웹 어플리케이션
React는 이러한 js 기반의 어플리케이션을 쉽게 만들 수 있도록 도와주는 라이브러리(또는 light-weight framework)이다. 핵심적인 역할은, 개발자가 저수준(low level, vanilla js)의 코드를 직접 모두 작성하는 대신, Component를 통해 어플리케이션을 구축하도록 돕는 것이다. 이 때 Component란, 개발자가 복잡한 여러 개의 html 태그를 하나로 묶어서 정의한 것(custom HTML element)을 말한다.
즉 React는 컴포넌트를 만들 수 있는 자바스크립트 라이브러리이다. 물론 html, css, js 만으로도 UI를 만들고, 웹 앱을 구축할 수 있다. 다만 react는 더 간단한 코드로 동일한 일을 수행할 수 있게 도와준다.
Crucial concepts
what exactly is a Component?
React is all about Components
위의 예제에서 어떤 component들은 반복적으로 사용되고 있다. 예를 들어 직원 리스트의 아이템과 직원 정보를 클릭했을 때 보여지는 details은 모두 똑같은 UI를 가지고 다른 data를 보여줄 뿐이다. 이를 html, css, js 만을 가지고 구축할 때, react를 이용해서 구축할 때를 간단하게 비교해 보자.
먼저 html, css, js 만을 이용해서 작성한다고 해 보자.
// imperative approach
const body = document.querySelector('body');
const employee = document.createElement('div');
const name = document.createElement('strong');
const department = document.createElement('p');
strong.innerText = 'Emilly Lawden';
p.innerText = 'sofrware enjineer';
body.append(employee);
employee.append(strong);
employee.append(p);
- html | 화면의 기본 구조를 마크업해야 한다. 반복되고 있는 직원 아이템을 모두 마크업해야 한다.
- css | html에 지정된 클래스를 select해서 스타일링한다.
- js | 사용자와 상호작용하는 로직을 모두 작성한다(이벤트 리스너, 직원 리스트에 아이템 추가하기...).
react를 이용해서 작성한다면 어떨까? react는 html, css, js로 분리하는 것이 아니라 component 별로 분리해서 코드를 작성한다.
- employListItem | 해당 컴포넌트의 기본 구조, 스타일링, 로직을 모두 작성해야 한다.
- employDetails
- ...
이렇게 컴포넌트 별로 나누어서 작성한 코드는 다음과 같은 장점이 있다. 아래의 장점들은 단지 react에 국한되는 것이 아니라 clean code를 작성하는 데에 통용되는 프로그래밍의 보편적인 개념이다.
- re-useability | 반복되는 컴포넌트를 재사용할 수 있다.
- seperation of concerns | 컴포넌트 단위로 분리해서 코드를 간단하게 작성하면, 하나의 파일 안에서 많은 로직을 관리할 때 보다 코드를 유지/보수하기 쉬워진다.
auto re-render & virtual DOM tree
리액트는 component이 가지고 있는 데이터에 변화가 생기면, render라는 함수를 호출한다. 즉 상태가 변할 때 마다 render가 호출된다. 이 때 render 함수는 사용자에게 보여지는 화면을 다시 렌더링 하는 역할을 한다. 즉, 컴포넌트 데이터에 변화가 생기면 리액트가 자동으로 re-rendering 작업을 실행한다. 이 때 실제 DOM Tree가 아니라 가상 DOM Tree에 UI의 변화 내용을 기록하고, 필요할 때 한번에 rendering을 하기 때문에 웹 앱 성능에 문제가 생기지는 않는다. 또 react 자체에서 60 fps 성능을 보장하기 때문에 마음 편하게 개발할 수 있다.
how to start react? | create react app
Tools are programs that software developers use to support other programs and application
$ npx create-react-app my-app
$ cd my-app
$ npm start
$ npm install --global create-react-app
$ yarn create react-app 폴더이름
$ yarn start
+) npx 명령어는 package.json의 dependencies를 자동으로 설치하는 것을 포함하고 있다.
+) npm start는 리액트 프로젝트를 로컬 서버와 연결해 준다.
file structure
// index.js
import ReactDOM from 'react-dom'; // js 파일은 확장자 생략 가능
import './index.css'; // 확장자 생략 불가능
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
src/ index.js | 로컬 서버에서 가장 먼저 실행되는 파일
- import ReactDOM | 3rd party library
- import css | 원래 js 파일에 css를 연결하는 것은 불가능하다.
- <App /> | react 컴포넌트, 원래 js 파일에 이상한(?) html 태그를 삽입하는 것은 불가능하다.
- 그러나 코드가 브라우저에 전달되기 전에, npm start process가 위의 syntax를 유효하게 변환(transform)함으로써 정상적으로 페이지가 보여지게 된다.
- 이것이 개발자가 더 쉽고 편안하게 코드를 작성할 수 있는 이유이다.
- ReactDOM.render(<App />, document.getElementById('root')) | id가 root인 element의 내부에 <App />이라는 컴포넌트를 삽입한다.
<!--index.html-->
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
public/ index.html | 브라우저에 load 하는 단 하나의 html 파일(SPA)
+) public 폴더 | 사용자가 한번 다운 받으면 다시 변화하지 않는 static contents가 포함되어있다. 주로 우리가 배포할 때 외부적으로 보여지는 아이콘, html...이 포함되어있다. 이 폴더에는 manifest.json(PWA만들 때 필요)과 robots.txt(웹 크롤링에 이용)가 포함되어있다.
// App.js
function App() {
return (
<div>
<h2>Let's get started!</h2>
</div>
);
}
export default App;
app.js | 원래 App이라는 함수가 html 코드를 return하는 것도 불가능한 일이다. App 함수는 <App /> 컴포넌트를 반환한다.
- App 컴포넌트는 다른 UI 컴포넌트와는 다른 특별한 컴포넌트이다.
- <App />은 index.js가 실행되면서 index.html에 렌더링되는 유일한 컴포넌트로, 다른 UI 컴포넌트는 이 App 컴포넌트 안에 중첩(nesting)된다.
create react app에 포함되어있는 패키지
- BABEL은 ES 2015+ 이상의 문법으로 작성된 JS 코드를 old version으로, 또는 타입스크립트나 JSX 같은 것들을 순수 JS로 변환해 주는 JS Compiler이다.
- WebPack은 우리가 작성한 코드와, 코드에 포함되는 여러 resource(이미지, 폰트 등)를 하나의 묶음으로 bundling해 주는 툴이다.
- ESLint는 우리가 코드를 잘못 작성했을 때, 즉 오류가 있을 때 즉각적으로 경고를 띄워주는 툴이다.
- Jest는 코드의 테스팅을 도와주는 툴이다. (유닛테스트)
+) 웹앱을 배포할 때에는, npm run build (또는 yarn build) 커맨드 명령어를 이용하는데, 이 때 만들어지는 폴더를 배포용 서버에 전달 한다. webpack에 의해 수많은 js, ts 파일이 하나로 합쳐진다.
+) 사용자에게 우리의 웹 페이지를 보여줄 수 있도록, index.html에 script가 연결되는 것을 볼 수 있다.
'Study > React' 카테고리의 다른 글
| JSX (0) | 2022.06.16 |
|---|---|
| Component & Props (0) | 2022.06.16 |
| MVC & Dependency Injection (0) | 2022.04.29 |
| PostCSS (0) | 2022.04.23 |
| Deployment (0) | 2022.04.22 |
