[react] 리액트가 무엇일까(컴포넌트,게임엔진,npm,웹팩)

리액트를 이용해서 프로젝트를 만들고 있다

 

사용하면서도 자세하게 알려고 한적이 있던가

 

알아보자

 

 

 

---

리액트는 프론트엔드 프레임워크 중 하나다 

 

현재 많이 쓰이는 프레임워크가 리액트(react), 앵귤러(angular), 뷰제이에스(vue.js) 등이 있다

 

앵귤러는 화면 출력, 형상 관리, 배포하여 완성형 프레임워크를 지향한다

 

뷰제이에스는 가장 나중에 나왔고 다른 프레임워크 장점은 유지하고 단점은 보완하였다

 

이중 가장 많이 사용하는게 리액트다 페이스북도 리액트로 개발 되었다

 

 

 

리액트개발자 찾는 기업이 많다고 한다 좀 이득이다

---

컴포넌트(component)

 

가장 큰 특징은 "화면 출력에 특화된 프레임워크"이다

컴포넌트는 작고 독립적인 코드 블록을 조합하여 빠르고 효율적으로 화면을 구성한다

 

 

컴포넌트를 만드는 과정은 레고 블록을 조립한다고 이해가 가능하다

 

---

게임엔진원리

자바스크립트에는 제이쿼리(jQuery), 핸들바(handlebars)라는 라이브러리가 있다

 

이 라이브러리는 간단하지만 화면이 커질수록 화면을 그리는 시간이 길어지고

 

화면의 일부분만 수정되어도 화면 전체를 다시 그리게 된다

 

화면 구성 트리이다 3번만 바꾸고 싶은데 6,7번까지 같이 새로 그린다

 

비효율 적이다

 

게임엔진원리를 도입했다 게임엔진은 다음 장면에 필요한 화면을 미리 그려 두는 방법으로

화면을 빠르게 전환한다

 

다음에 나타날 화면의 일부를 미리 그려놓고 변경된 화면의 일부만 수정하는 가상화면(Virtual DOM)기술을 만들었다

 

---

노드 패키지 매니저

 

npm은 https://www.npmjs.com에서 필요한 라이브러리를 내려받아 설치하고 삭제하는등 관리를 해주는 프로그램이다

 

node_modules 폴더에 라이브러리를 내려받아 저장하고 package.json이라는 파일에 설치된 라이브러리 정보를 적어 저장한다

 

실제 라이브러리와 라이브러리가 적혀있는 파일을 따로 관리하는것이다

 

개발자 A가 개발자 B에게 라이브러리 명세와 핵심 코드만 전달하면 B는 package.json만 보고 쉽게 라이브러리를 내려받을 수 있다

 

---

웹팩

 

프로젝트에 사용된 파일을 분석해서 기본 웹문서 파일로 변환 하는 도구다 

 

프레임워크가 .jss .css .jpg 같은 기존 웹 문서 파일을 사용하지 않기 때문에 웹팩이 필요하다

 

 

 

웹 브라우저가 해석할 수 없는 .hbs .cjs .sass등을 파일을 웹팩이 분석해서 .js .css로 변환 해주는 모습이다

 

js, png, jpg 등과 같은 파일 적절한 크기로 자르거나 묶어주는 역할도 한다

 

이외에도 불필요한 파일을 제외하거나 압축을하고 간단한 웹서버를 구동 할 수도 있다

 

---

야매로 시작해서 잘모른다

 

뭔지는 알고쓰자!

 

 

 

 

 

 

 

참고: "실리콘밸리개발방법으로배우는리액트프로그래밍정석"