[React] 리액트 개념

아래는 "Do it! 리액트 프로그래밍 정석" 책을 읽고 정리한 내용이다.

리액트란?

리액트는 프런트엔드 프레임워크 중 하나이다. 

프론트엔트 프레임워크의 종류

• React 리액트
• angular 앵귤러
  • 화면 출력, 형상 관리부터 배포까지 많은 기능을 포함한 완성형 프레임워크를 지향
• vue.js 뷰제이에스
  • 가장 나중에 나온 프레임워크로 다른 프레임워크의 장점은 흡수하고 단점은 보완한 프레임워크

하지만 이 중 사람들이 가장 많이 사용하는 프레임워크는 리액트이다. 

아래 사이트에서 프레임워크 다운로드 현황 그래프를 확인할 수 있다. 

https://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue

@angular/core vs angular vs react vs vue | npm trends

리액트의 장점

리액트의 가장 큰 특징은 '화면 출력에 특화된 프레임워크'라는 것이다.

1. 컴포넌트로 화면 구성을 효율적으로 할 수 있다. 
   • 리액트는 컴포넌트라는 작고 독립적인 코드 블록을 조합하여 빠르고 효율적으로 화면을 구성한다. 
2. 게임 엔진 원리를 도입하여 화면 출력 속도가 빠르다.
   • 가상 화면 기술을 도입하여 화면 출력 속도를 높이고 코드의 복잡성도 줄였다. 
   • 문제점 : 자바스크립트에는 jQuery와 handlebars라는 라이브러리가 있다. 이 라이브러리는 아주 간결한 코드로 화면을 구성할 수 있지만 큰 단점이 존재한다. 화면이 커질수록 화면을 그리는 시간도 길어진다는 점이다. 화면의 일부분만 수정되어도 화면 전체는 다시 그린다는 것. 매우 비효율적이다.
   •  

     

   • 해결책 : Virtual 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

GitHub - FEDevelopers/tech.description: 기술 문서 정리하는 저장소

---

npm 이란?

자바스크립트 라이브러리를 관리해주는 프로그램이다.

• node_modules 폴더 : 이곳에 라이브러리를 내려받아 저장 (실제 라이브러리)
• package.json 파일 : 설치된 라이브러리의 정보를 적어 저장 (명세 파일)

이렇게 실제 라이브러리와 명세 파일을 따로 관리하는 이유는 node_modules에 저장되는 라이브러리의 용량이 매우 크기 때문이다. 예를 들어 다른 개발자에게 프로젝트를 공유하는 경우 라이브러리의 명세와 핵심 코드만 전달하면 된다. 그러면 그 상대방 개발자는 package.json 목록을 이용하여 쉽게 라이브러리를 내려받을 수 있다. 

yarn 이란?

npm의 단점을 보완하여 성능과 속도를 개선한 라이브러리 관리 도구이다. 하지만 기본적으로 npm과 동일한 기능을 한다. 

 

Webpack 이란?

프로젝트에 사용된 파일을 분석하여 기존 웹 문서 파일로 변환하는 도구이다. 웹팩이 필요한 이유는 프레임워크가 .js, .css, .jpg와 같은 기존 웹 문서 파일을 사용하지 않기 때문이다. 예를 들어 부트스트랩은 .sass 파일로 작성하는데 웹 브라우저는 .sass 파일을 해석하지 못하므로 중간에 웹팩이 이 파일을 해석해준다. 

즉, 웹 브라우저가 해석할 수 없는 파일을 웹팩이 분석하여 .js, .css 등의 파일로 변환해준다. 또한 웹팩은 js, png, jpg 등과 같은 파일을 적절한 크기로 자르거나 묶어서 불필요한 파일을 제외하거나 압축하여 프로젝의 용량을 줄여준다.