* 본 게시글은 이 링크를 참고하여 만들었습니다.
React란?
리액트는 페이스북이 만든, 사용자 UI 구축을 위한 라이브러리입니다.
아마, 리액트에 대해서 슬쩍 들어보셨던 분들이라면
'리액트는 프레임워크 아니었어? 뷰나 앵귤러는 프레임워크던데...'
라는 생각을 가지실 수도 있을 것 같아요.
하지만 엄연히, 리액트는 라이브러리가 맞습니다.
다만, 개발자들이 리액트에 필요한 여러 가지 기능들을 추가해놨기 때문에,
사실상 프레임워크에 '가깝다' 라고 말하는 것이죠.
React의 대표적인 특징
1. JSX 문법
리액트는 JSX 문법을 사용하는 것이 특징입니다.
JSX가 뭐냐구요? 이는, 자바스크립트 안에서 HTML 문법을 사용해서
View를 구성할 수 있게 도와주는 자바스크립트 문법입니다.
JSX 문법을 사용함으로써, 리액트의 사용성이 굉장히 증가했다고 이해하시면 될 것 같습니다.
2. Component 기반
리액트는 컴포넌트 기반 라이브러리입니다. 이게 무슨 말일까요?
기존의 웹 페이지를 작성할 때처럼, 하나의 HTML 코드만으로 작성하는 것이 아니라,
마치 객체지향언어의 클래스 재활용처럼 HTML 코드를 분할하여,
코드를 재사용할 수 있게 하고, 유지보수성을 증가시킨다는 것입니다.
실제로, 리액트를 프로그래밍하면 각각의 컴포넌트들이 파일(.js)로 관리되어 있음을 확인 가능합니다.
3. Virtual DOM
우선, DOM이란 무엇일까요?
'Document Object Model' 의 약자입니다. 한국어로 번역하면 '문서 객체 모델'이 됩니다.
우리가 사용하는 HTML 단위 하나하나를 객체로 생각한 모델입니다.
즉, 'html', 'body', 'div' 등등의 HTML 구성 요소 하나하나를 객체로 생각했다는 것입니다.
그렇다면, 이 DOM 구조에 문제가 있으므로, Virtual DOM을 사용했다는 것이겠죠?
DOM은 트리 구조로 이루어져 있습니다. 그렇기 때문에, 만약 프로그래머가
어떤 DOM 요소를 수정하는 함수를 만들어 실행시키면, 렌더링 트리를 재 생성해야 합니다.
이 과정이 빈번하게 이루어진다면, 불필요한 연산을 계속 해야하기 때문에 속도가 느려집니다.
이러한 문제를 해결하기 위해서, Virtual DOM 이라는 개념이 등장했습니다.
DOM 자체도 추상화된 개념인데, Virtual DOM은 거기에 한번 더 추상화된 것입니다.
Virtual DOM에서는, 변화를 미리 인지해 변화시켜 놓습니다.
이 변화에 대한 작업은 실제 렌더링 트리를 만드는 것이 아니기 때문에 연산 비용이 적습니다.
모든 변화가 이루어진 Virtual DOM의 변화를 실제 DOM에게 전달하여, 모든 변화를 한번에 렌더링합니다.
즉, 속도에서 최적화가 이루어졌다는 것입니다.
React의 설치 방법
* 본 게시글은 윈도우10을 기준으로 작성했습니다.
리액트를 사용하기 위해서는, Node.js가 설치되어있어야 합니다.
초보자들이 리액트를 편하게 사용하기 위해서, 페이스북에서는 create-react-app이라는
매우 편리한 도구를 제공하고 있습니다.
이를 왜 사용해야 할까요?
리액트를 설정하는 과정에서는, webpack이나 parcel같은 번들러를 이용해야 합니다.
이는 필요한 모듈이나 라이브러리를 하나의 .js 파일로 만들어주는 기능을 합니다.
또한, 리액트는 JSX 문법을 사용하기 때문에, 브라우저 호환성을 위해서 babel을 사용해야 합니다.
초보자의 입장에서는 리액트 하나만을 배우기에도 벅찬데,
이러한 모든 것들을 신경쓰기는 어렵겠죠? 그렇기 때문에, 초보자의 입장에서 우리는
create-react-app 을 사용하는 것입니다. 이를 설치하기 위해서는 커맨드 창에서 다음과 같이 입력하면 됩니다.
npm install -g create-react-app
프로젝트를 만들기 위해서는 다음과 같이 입력합니다.
create-react-app hello
이는 'hello' 라는 프로젝트를 생성하는 명령어입니다.
'Front-End > React' 카테고리의 다른 글
| [React] 리액트의 생명 주기 (0) | 2020.11.15 |
|---|