리액트에 대해 알아보자
🚀 리액트 공식 홈페이지 문서를 기준으로 정리한 글입니다
React?
사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다 - React 자습서
React의 특징
- 라이브러리
비슷한 기능을 하는 Angular, Vue와 다르게 React는 자신을 '라이브러리'로 칭하고 있다
때문에 MVC와는 다르게 리액트는 오직 View만을 담당하며, 프레임워크들보단 내장 기능이 적기 떄문에 third-party 라이브러리를 함께 사용한다third-party 라이브러리 🚀
프로그래밍에서의 서드파티란 프로그래밍을 도와주는 plug_in 이나 library 등을 만드는 회사를 말하므로 third-party 라이브러리 = 도움을 주는 툴, 라이브러리 정도로 생각하면 된다 - Component
독립적이고 재사용 가능한 조각을 말하며, React로 만든 웹 페이지는 수 많은 Component들의 조합이라고 할 수 있다 - SPA
Single Page Application의 약자로 한 개의 페이지로 이루어진 어플리케이션이라는 의미이다
우리(개발자)들은 React나 Vue 같은 라이브러리, 프레임워크를 통해 사용자의 브라우저에 뷰 렌더링을 시키고, 필요한 정보만 렌더링 한다
물론 React 사용시 꼭 SPA로 만들어야 하는 것은 아니며 어플리케이션 규모가 커질경우 단점도 존재하니 상황에 따라 알맞은 방법으로 만들어야 한다HTML이 한 개면 나머지 페이지는..? 🤔
SPA을 만드는 경우 라우팅을 통해 다른 뷰(화면)을 보여준다
여기서 라우팅은 주소에 따라 다른 뷰(화면)을 보여주는 것을 말하는데, 리액트에는 해당 기능이 있지 않기 때문에 외부 라이브러리를 이용해야한다
React 작업 환경 설정
node.js & npm
node.js는 자바스크립트를 브라우저가 아닌 곳에서도 사용 할 수 있게 도와주는 자바스크립트 실행 환경이다
리액트는 node.js와 직접적인 연관은 없지만 개발시 필요한 도구들(ex. babel)이 node.js기반이기 때문에 설치해야한다
npm은 node package manager로 node.js기반 패키지를 사용할 때 필요하다
node.js 설치시 npm이 자동 설치된다
node.js 홈페이지 에서 설치할 수 있고, node - v를 터미널에 입력하면 버전을 확인 할 수 있다 (npm 버전 확인 npm - v)
CRA(Create-React-App)
리액트에 필요한 개발 환경을 세팅 해주는 도구(toolchain) 이다
리액트는 직접 구축해야할 개발 환경이 많기 때문에 이를 해결하고자 리액트 팀에서 만든 툴체인이다
CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다
CRA에는 바벨과 웹팩과 같이 리액트 애플리케이션 실행에 필요한 다양한 패키지가 포함되어 있으며, 테스트 시스템, ES6+ 문법, CSS 후처리 등 거의 필수라고 할 수 있는 개발 환경도 구축해 준다
출처 : Wecode
JavaScript build 툴체인은 주된 구성 요소
- Yarn, npm 같은 패키지 매니저
서드파티 패키지를 활용할 수 있게 하며, easy install, easy update를 돕는다 - webpack, Parce 같은 번들러
코드를 모듈방식으로 작성할 수 있게 하고 이를 패키지로 묶어 로딩 시간을 최적화 할 수 있다모듈이란 🚀
여러 기능들에 관한 코드가 모여있는 하나의 파일 - Babel 같은 컴파일러
최신 Javascript 문법이 구형 브라우저에서도 동작할 수 있도록 변환 시켜주는 역할을 한다
설치
-
프로젝트 폴더로 이동
cd Desktop/wecode -
app 프로젝트 설치
npx create-react-app my-app -
my-app 프로젝트 진입
cd my-app -
로컬 서버 띄우기
npm start
상세 내용은 React 공식 홈페이지 를 참고하자 (사실 별로 상세하진 않다)
끝~
