React 개발환경
Node.js : JavaScript로 네트워크 어플리케이션을 개발할 수 있게 해주는 환경입니다.
npm : Node Package Manager의 약자로, Node.js 를 위한 패키지 매니저입니다. 패키지 매니저는 프로젝트에서 필요로 하는 다양한 외부 패키지들의 버전과 의존성을 관리하고 편하게 설치 및 삭제를 도와줍니다.
// 설치 확인하기
$ node --versionReact ?
React 는 Meta가 만든 오픈소스 프로젝트로, 공식 웹사이트에서는 유저 인터페이스를 만들기 위한 JavaScript 라이브러리로 정의합니다.
여기서 라이브러리는 자주 사용되는 기능들을 정리해 모아 놓은 것을 말합니다. 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해 주는 것이 유저 인터페이스(User Interface, UI)입니다.
React는 대표적인 JavaScript UI 라이브러리이다 ❗️
JavaScript UI 라이브러리에는 AngularJS, Vue.js 등이 있습니다.
| 프레임워크 | 라이브러리 |
|---|---|
| 흐름의 제어 권한을 프레임워크가 가짐 | 개발자가 필요한 부분만 가져다 사용 |
| AngularJS, Vue.js | React |
장점 1 : 빠른 업데이트
React 의 장점으로는 웹사이트를 탐색할때 화면의 빠른 업데이트와 렌더링 속도가 있습니다. 빠른 업데이트를 위해 Virtual DOM 을 사용합니다.
DOM
Document Object Model의 약자로, 웹페이지를 정의하는 하나의 객체라고 생각하면 됩니다.
Virtual DOM
실제 DOM이 아닌, 가상의 DOM을 말합니다. 웹페이지와 실제 DOM 사이에서 중간 매개체 역할을 합니다.
이미지 출처
일반적으로 사용자와 상호작용을 하는 웹페이지 같은 경우 화면의 업데이트가 수시로 이루어집니다. 화면의 업데이트된다는 말은 DOM이 수정된다는 말과 같습니다.
React 는 업데이트해야 할 최소한의 부분만을 검색한 후, 검색된 부분만을 업데이트하고 다시 렌더링하면서 변경된 내용을 빠르게 사용자에게 보여줍니다.
장점 2 : Component-Based
React 의 장점으로 컴포넌트 기반의 구조가 있습니다. 컴포넌트 는 구성 요소를 뜻합니다.
모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있습니다.
재사용성(Reusability)
컴포넌트 기반의 구조는 재사용성(Reusability) 이라는 장점을 가집니다. 말 그대로 계속해서 다시 사용이 가능한 성질을 말하며, 물리적인 물질은 쓰면 쓸수록 닳기에 재사용 이라는 개념은 소프트웨어 분야에서만 주로 쓰입니다.
하지만 모든 소프트웨어가 곧바로 어떤 곳에서든 재사용이 가능하지는 않습니다. 다른 모듈의 의존성이 있다면 독립적으로 사용할 수 없는 의존성 문제 등 여러가지 호환성 문제가 발생할 수 있습니다.
소프트웨어를 개발할 때 재사용성이 높게 개발해야 한다는 말은 해당 소프트웨어 또는 모듈이 다른 곳에서도 쉽게 곧바로 쓸 수 있도록 개발하는 것을 의미합니다.
재사용성이 높아지면 전체 소프트웨어의 개발 기간이 단축되며, 유지 보수가 용이합니다.
장점 3 : React Native
React Native 라는 모바일 환경 UI 프레임워크를 사용해서 모바일 앱을 개발할 수도 있습니다.
