💡 React
UI 컴포넌트를 기반으로 사용자 인터페이스를 구축하기 위한 무료 오픈 소스 프론트엔드 자바스크립트 라이브러리 (페이스북에서 제공)
💭 왜 React를 사용할까?
JavaScript를 사용하여 HTML로 구성한 UI를 제어하기 위해서는 특정 DOM을 선택한 뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해야 한다. 따라서 사용자와 인터랙션이 자주 발생하여 동적으로 UI를 구현해야 할 경우, 관리가 힘들고 웹 애플리케이션의 규모가 커질수록 성능 저하의 원인이 될 수 있다.
그러나 React는 Virtual DOM을 사용하여 빠른 성능을 유지하도록 도와준다.
🔎 Virtual DOM이란?
메모리에 가상으로 존재하는 DOM (JavaScript의 객체)
Virtual DOM은 하나의 가상 레이어이다. Virtual DOM에 적용되는 변경 사항은 DOM에 바로 반영되지 않고, 그 변경 사항들을 모아뒀다가 한번에 DOM에게 보낸다. 이렇게 되면 DOM은 업데이트, 렌더링을 딱 한 번만 하면 된다. 따라서 DOM 조작이 빈번할 경우 Virtual DOM은 DOM을 조작하는 것에 비해 효율적으로 동작한다.
그렇기 때문에 우리는 React를 사용한다.
📁 특징
선언적이다.
React는 인터랙티브한 UI를 만드는 것을 쉽게 해 준다. 프로그램에서 각 상태에 대한 간단한 뷰를 설계하면 데이터가 변경될 때 React가 적절한 구성 요소를 효율적으로 업데이트하고 렌더링한다.
선언적 뷰는 코드를 더 예측 가능하고 디버깅하기 쉽게 만든다.
컴포넌트 기반이다.
UI를 하나의 큰 덩어리로 생각한다면 컴포넌트는 그 덩어리를 이루는 아주 작은 요소들이다. 그런 요소들을 설계해서 쌓아 올리면 하나의 UI가 만들어진다. 컴포넌트로 나누어져 있기 때문에 전체 코드를 파악하기가 쉽다. 또한 이 컴포넌트들은 다른 화면에서도 사용될 수 있는 재사용성을 가지고 있어, 똑같은 코드를 반복적으로 입력할 필요가 없어 효율적이다.
JSX를 사용한다.
JSX는 Javascript에 XML을 추가한 확장된 문법이다. JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다. 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.
📁 React 설치하기
React 앱을 만들기 위해서는 먼저 Node.js를 설치해야 한다.
👀 Node.js란?
JavaScript 런타임 환경으로, npm(Node Package Manager)을 사용하여 라이브러리 및 도구를 설치할 수 있음
🔎 Step 1
Node.js 설치하기
-
Node.js 사이트 접속하기
-
'LTS' 버전으로 다운로드 받은 뒤 설치하기
🔎 Step 2
React 앱 시작하기
- Windows 검색창에 'Windows PowerShell' 검색 후 관리자 권한으로 열기
node -v로 Node.js 설치 및 버전 확인하기
get-help Set-ExecutionPolicy명령어 실행 후 Y 입력하기
Set-ExecutionPolicy RemoteSigned명령어 실행 후 Y 입력하기
🔎 Step 3
Yarn 설치하기
React에서는 npm(Node Package Manager)으로도 라이브러리 및 도구를 설치할 수 있지만, 성능과 전역 설치를 위해서 yarn 이용을 권장한다.
- 평소 사용하는 Workspace에 react 워크스페이스를 생성한 뒤, VS Code에서 해당 폴더 열기
Ctrl + Shift + `또는Terminal ▶ new Terminal로 터미널 실행하기
npm install -global yarn으로 전역으로 yarn 설치하기
이때! 만약 yarn 설치가 안 된다면 🤔
간혹 이 단계에서 yarn 설치가 안 될 때가 있다. (그게 바로 나... ^^)
그럴 때는 시스템 환경 변수를 편집해 주어야 한다.
① Windows 검색창에 '시스템 환경변수 편집' 검색 후 열기
② 고급 ▶ '환경변수' 클릭하기
③ 사용자 변수 중 'Path' 클릭 ▶ '편집' 클릭하기
④ '새로 만들기' 클릭 ▶ 내 node.js 폴더 경로 작성 후 확인 누르기
이곳에 내 node.js 폴더 경로를 등록해 주면 된다. 이 경로는 사용자에 따라 다르니 직접 내 폴더 경로를 확인 후 작성하자!
이 과정까지 마친 뒤 VS Code를 재실행하면 yarn을 설치할 수 있다. 👍
다시 이전 단계로 돌아가 하던 작업을 마저 해 보자... :)
yarn –version으로 yarn 실행 가능한지 확인하기
yarn global add creat-react-app으로 전역에서 create-react-app을 사용할 수 있도록 명령어 실행하기
🔎 Step 4
React 앱 생성하기
npx create-react-app my-app으로 'my-app'이라는 이름의 리액트 앱 생성하기
VS Code 탐색기를 보면 'my-app' 이름으로 React 앱이 생성된 것을 확인할 수 있다.
이제 프로젝트를 실행해 보자.
yarn start명령어로 프로젝트 실행시키기
성공적으로 React가 실행되는 모습이다.
이제 React를 사용할 기본 세팅은 모두 끝났다! 😉
