[React] React 소개

리액트 란?

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

현재 가장 주목받는 프레임워크는 리액트, 앵귤러, 뷰제이에스를 꼽는다. 그 중 가장 많이 사용하는 프레임워크는 리액트이다.

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

리액트를 사용하는 기업도 많아지고 있다. 페이스북, 드롭박스, ms, 우버 등 많은 대형기업이 리액트를 사용하고 있다.

리액트 개념

리액트는 페이스북을 개발할 때 사용한 기술.

공개 소프트웨어이다.

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

리액트 장점

1. 컴포넌트로 화면 구성을 효율적으로…

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

리액트는 가상 화면 기술을 도입해 화면 출력 속도를 높이고 코드의 복잡성도 줄였다.

2. 게임 엔진 원리를 도입해 화면 출력 속도가 빠르다.

자바스크립트에서는 제이쿼리와 핸들바라 라이브러리가 있다. 이 라이브러리는 아주 간결한 코드로 화면을 구성할 수 있지만 화면이 커질수록 화면을 그리는 시간도 길어진다는 단점이 있다. 화면의 일부분만 수정되어도 화면 전체를 다시 그린다는 것도 문제이다.

페이스북은 알림 숫자가 일치하지 않는 고질적인 오류가 있었다. 화면 전체를 다시 출력하지 않기 위해 알림 숫자를 표시하는 부분만 수정하다 보니 발생한 문제였다. 이러한 문제를 해결하기 위해 페이스북 개발자들은 게임 엔진 원리를 도입했다. 게임 엔진은 다음 장면에 필요한 장면을 미리 그려 두는 방법으로 화면을 빠르게 전환한다.

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

JSX

JSX는 JavaScript XML의 약자로 자바스크립트에서 XML을 추가한 확장형 문법입니다. 큰 특징은 자바스크립트에서 HTML 문법을 사용할 수 있다는 점이고 주로 리액트나 다른 프론트엔드 프레임워크에서도 사용이 가능.

노드 패키지 매니저

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

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

라이브러리 명세를 따로 저장하는 이유는 라이브러리의 용량이 크기 때문에 핵심 코드와 라이브러리 명세만 전송하면 된다.

웹팩

프로젝트에 사용된 파일을 분석해 기존 웹 문서 파일로 변환하는 도구. 프레임워크가 js, css, jpg와 같은 기존 웹 문서 파일을 사용하지 않기 때문이다.

예를 들어 부트스트랩 템플릿 웹 문서 스타일을 css가 아닌 sass파일로 작성한다. 웹 브라우더는 sass 파일을 해석하지 못하므로 중간에 누군가 이 파일을 해석해 주어야 한다. 바로 그런 역할을 웹팩이 한다.

리액트 개발 환경 설치

1. 노드 버전 매니저로 노드제이에스 설치

노드제이에스는 구글에서 공개한 소프트웨어로 V8 엔진을 기반으로 만든 자바스크립트 런타임 도구이다. 노드제이에스는 웹 브라우저가 아닌 컴퓨터에서 자바스크립트를 실행할 수 있게 해준다. npm은 노드제이에스와 함께 설치된다.

2. yarn, create-react-app 설치

create-react-app은 리액트 프로젝트에 필요한 패키지들을 묶어 리액트 앱을 생성해주는 도구. 만약 이것이 없다면 리액트 프로젝트에 필요한 패키지를 일일이 찾아 package.json에 추가해야 한다.