React를 공부하면서 단순히 React를 사용하는 방법을 아는 것보다 왜 React가 등장하게 되었고, 어떠한 장점이 있어서 생태계가 활성화 됐는지에 대한 React 배경지식을 다뤄보려고 한다.
1. Web Aplication의 발전
3세대 웹으로 들어오면서 웹 페이지의 규모가 굉장히 커지고 웹 페이지라는 단어보다 웹 애플리케이션이라는 단어가 많이 사용된다. 규모가 커지다보니 이전의 방법들(DOM, jQuery)로는 애플리케이션을 개발하고 유지보수하는 것이 굉장히 어려워졌다.
만약 한 사이트의 다양한 DOM요소들이 있다고 상상해보자. 기본적인 로그인, 회원가입, 검색 기능만 해도 DOM요소에 직접 접근해서 조작하고 관리하는 것이 쉽지 않다. 하물며 더욱 큰 웹 애플리케이션에 있는 수 많은 DOM요소를 직접 관리하는 것은 매우 힘든 작업이 될 것이다.
그래서 등장한 것이 다양한 Frontend Framework(Library)이다. 그 중 3대장이라고 불리는 Angular, Vue, React가 있다.
1-1 Frontend Framework(Library)
Angular
- 구글에서 개발한 Framework
- TypeScript 기반으로 매우 안정적
- 다양한 기능 내장
- 활성화되어 있는 생태계
- 체계적이고 잘 정리되어있는 문서
- 가장 복잡하고 큰 러닝커브
Vue
- 가볍고 빠르게 개발이 필요할 때 좋음
- 상대적으로 작지만 빠르게 성장중인 생태계
- 가장 적은 러닝커브
React
- 페이스북에서 개발한 Library
- 가장 거대한 커뮤니티
- 웹과 앱 개발에도 사용(React Native)
- View만 담당
- 내장기능 부족으로 third-party 라이브러리를 함께 사용러리를 함께 사용
2. React
React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리다. 리액트같은 프론트엔드 라이브러리, 프레임워크를 사용하는 가장 큰 이유는 UI를 자동으로 업데이트 해준다는 점이다. 리액트는 가상 돔(Virtual Dom)을 통해 UI를 빠르게 업데이트해주고, 가상 돔은 이전 UI 상태를 메모리에 유지해서 변경 될 UI의 최소 집합을 계산하는 기술이다.
과거에는 다른 페이지로 이동할 때마다 새로운 html을 받아오고 페이지를 로딩할 때마다 서버에 리소스를 전달 받아 해석한 뒤 화면에 보여주었다. 하지만 이런 방식은 서버에 그 만큼 View에 대한 메모리를 담고 있어야 하기 때문에 성능적으로 좋지 않다. 반면에 React는 SPA(Single Page Application)로 한 개의 페이지를 로딩해준 후 사용자와의 인터렉션이 발생하면 기존의 UI와 비교하여 변경 된 부분만 보여주기 때문에 효율적으로 서버를 관리할 수 있다.
내가 React를 공부하게 된 이유도 프론트앤드 개발자가 되기 위해 어떤 기술 스택이 가장 많이 사용되는지 고민하던 중, 가장 많이 들었던 이야기가 리액트였다. 그 만큼 생태계가 활성화되어 있다는 뜻이고, 프레임워크에서는 개발자가 그 안에서 개발을 했다면 리액트는 내가 필요한 라이브러리들을 편하게 불러와서 사용하는 것이 매력적으로 느껴졌다.
3. Node.js & npm
3-1. Node.js
Node.js는 자바스크립트가 브라우자 밖(ex. 서버)에서도 동작하게 하는 환경을 의미한다. 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만 프로젝트를 개발하는 데 필요한 주요 도구(ex. Bable, Webpack)들이 Node.js 기반이기 때문에 반드시 설치해야한다.
3-2. npm
Node 기반의 패기지를 사용하기 위해서는 npm(node package manager)이라는 패키지 도구가 필요하다. npm을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다. npm은 Node.js를 설치하면 자동으로 함께 설치된다.
3-3. CRA(Create-React-App)
CRA(Create-React-App)는 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구이다. 리액트는 UI기능만 제공하기 때문에 개발자가 따로 구축해야하는 환경이 많다. CRA는 리액트로 웹 애플리케이션을 만들기 위한 개발 환경 세팅을 해준다.
그리고 CRA로 설치를 하면 초기 폴더 및 파일 세팅이 되어있다. 이 파일들은 서로 관계가 많으니 조금 더 자세히 알아보겠다.
node.modules, package.json, .gitignore
1. node.modules
- CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
2. package.json
- CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지정보가 기록되는 파일
3. .gitignore
- github에 올리고 싶지 않은 폴더와 파일을 작성하는 파일
- push를 해도 .gitignore 파일에 작성된 폴더와 파일을 올라가지 않는다.
우리가 github에 프로젝트를 push하고 누군가 clone을 받는다고 상상해보자. 만약 node.modules에 있는 모든 파일들을 올리고 내려받는다면 용량이 너무 커서 비효율적이고 github DB의 메모리 낭비도 심해진다.
그래서 .gitignore 파일에 올리고 싶지 않은 파일들을 작성해서 push를 할 때 필요한 파일들만 올라가게 하는 것이다.
하지만 팀 프로젝트를 할 때 초기 세팅을 모두 같게 해야하기 때문에 기본 패키지 외 추가로 설치해야하는 라이브러리/패키지도 있을 것이다. 이 때 필요한 파일이 package.json이다. package.json에는 기본 패키지 외 추가로 설치된 라이브러리/패키지정보가 기록되어 있기 때문에 clone을 받아서 npm install 명령어를 치면 package.json의 기록을 읽어 패키지들을 자동으로 설치해준다.
index.html, index.js, App.js
1. public - index.html
-
<div id="root"></div> -
리액트는 SPA이기 때문에 1개의 html만을 가지고 있다.
2. src - index.js
ReactDOM.render( <App /> , document.getElementById('root'))- 첫 번째 인자는 화면에 보여주려는 컴포넌트
- 두 번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치
- React의 시작
- 함부로 이름을 수정하면 안됨
3. src - App.js
- 현재 화면에 보여지고 있는 초기 컴포넌트
App.js 컴포넌트를 초기화면이라고 생각하고, index.js의 ReactDOM.render함수에서 App컴포넌트를 ID가 root인 요소로 전달한다. index.html에서 id가 root인 곳에 App.js컴포넌트를 보여준다.
짧게 정리하면 App.js -> index.js -> index.html 순으로 우리가 만든 컴포넌트들이 결국 한 페이지에서 랜더링된다.
