01-1. 리액트의 정체를 알아보자!

 

이 책으로 공부 시작

https://github.com/justinpark/justin-do-it-react

 

 

 

---

 

리액트란?

 

리액트는 프론트 프레임워크 중 하나다. 현재 프론트 프레임워크로는 리액트, 앵귤러, vue.js를 많이 사용하고 있다. 

 

React

• 높은 사용률
• 코드 블록(컴포넌트)을 조합하여 효율적인 화면 구성
• 가상 화면 기술(Virtual DOM) 도입: 화면 출력 속도 빠름

 

Angular

• 완성형 framework 지향

 

Vue.js

• 다른 프레임워크의 장점 흡수, 단점 보완 

 

 

 

프레임워크: 개발자가 작업을 할 때 사용하는 tool.

vs

라이브러리: 하나의 기능을 제공함, 개발자가 필요할 때 가져와서 사용.

 

리액트는 다른 프레임워크와는 달리 오로지 ui를 만드는 기능만을 제공하기 때문에, 프레임워크와 유사한 역할을 하는 JavaScript 라이브러리라고 할 수 있다.

 

 

 

가상화면 기술에 대해 조금 더 알아보자.

 

---

 

리액트의 가상 화면 기술(Virtual DOM, 가상 돔)

: 화면의 일부를 미리 그려놓고 변경된 화면의 일부만 수정하는 기술.

 

js의 다른 라이브러리인 jQuery, 핸들바와 비교해보면, 이들은 화면의 일부분만 수정되어도 화면 전체를 다시 그리기 때문에 오류를 고치기 힘들다는 단점이 있었다(예: 페이스북 알림 버그).

이런 문제를 해결하기 위해 페이스북에서는 가상 DOM을 도입한 리액트를 개발했다.

 

https://github.com/FEDevelopers/tech.description/wiki/%EA%B0%80%EC%83%81-%EB%8F%94%EA%B3%BC-%EB%8F%94%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

가상 돔과 돔의 차이점

 

DOM

• 웹페이지의 구조를 표현.
• 웹 페이지의 컨텐츠를 동적으로 수정하고 싶으면 DOM을 수정한다.

 

가상 DOM

• 실제 DOM을 추상화한 것으로, DOM의 간소화된 복사본이라고 할 수 있다. DOM은 이미 추상화 개념이기 때문에 가상 DOM은 추상화를 또 추상화한 개념이다. 
• 가상 DOM은 메모리 내에만 존재하고, 렌더링 효율성을 향상시킨다.

 

 

 

---

 

NPM(노드 패키지 매니저)

: 자바스크립트 라이브러리를 설치하고 버전을 관리한다.

node_modules 폴더에 실제 라이브러리를 저장하고, package.json 파일에는 설치된 라이브러리의 정보(명세 파일)를 적어 저장한다.

(이 책에서는 npm 대신, npm을 개선한 yarn이라는 프로그램을 사용한다)

 

 

 

 

---

 

웹팩

: 프레임워크가 사용하는 파일 중 웹브라우저가 해석할 수 없는 파일(.sass 파일 등)을 분석하여 .js, .css 등의 파일로 변환한다. 여러 개의 js파일 및 관련 리소스 파일을 적절하게 자르거나 묶어주는 역할도 한다.