드디어 리액트다..! ㅎㅅㅎ
React
현재 가장 인기 있는! 사용자 인터페이스(UI) 변경에 중점을 둔 자바스크립트 라이브러리이다.
WHY React ?
점점 웹의 규모가 커지면서 다양하고 복잡한 UI,UX를 구현하게 되면서 기존 방식의 웹 개발과 유지보수가 점점 어려워졌다. 특히 Facebook과 같은 사용자와 웹사이의 상호작용이 점점 많아지면서 원활한 웹 서비스를 위해 SPA가 등장했고 이런한 SPA의 웹 제작과 복잡한 어플리케이션의 개발의 생산성을 향상 시키기 위해 Framework(Library)가 등장하게 되었다.
SPA
싱글 페이지 애플리케이션(Single-Page Application, SPA)는 서버로부터 완전히 새로운 페이지를 불러오지 않고 갱신에 필요한 데이터만 받아, JS가 동적으로 HTML 요소를 생성하여 해당하는 부분만 업데이트하는 방식의 웹이다.
- 필요한 리소스만 부분적으로 로딩, 불필요한 부분의 리로드 방지
기존의 클라이언트가 서버에 요청을 하면 서버에서 HTML을 보내 화면을 그려주는 방식 (새로고침 발생!)과 다르다.
Frontend Framework
대표적으로 3대장이 있다.
Angular
2010년 구글에서 개발한 프레임워크, TypeScript 기반으로 매우 안정적이고 탄탄한 프론트엔드 앱 개발이 가능하며 다양한 기능이 내장되어있다. 무겁고 배우기 어렵다는 단점이 있다.
Vue
2014년 Evan You라는 개인이 개발한 프레임워크, 코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼으나 성장 속도가 매우 빠르다.
React
2013년 Facebook에서 개발한 라이브러리.
MVC(Model-View-Controller) Architecture인 Angular, Vue와는 다르게 React는 오직 View만 담당한다.
그래서 앞에 대장과는 달리 내장된 기능이 부족하기에 third-party 라이브러리 (ex. React-router, Redux)를 함께 사용한다.
React는 가상돔 (Virtual DOM) 통해 UI를 자동으로 빠르게 업데이트 할수 있다.
가상 돔(Virtual DOM)
이전 UI 상태를 메모리에 유지해서 변경될 UI의 최소 집합을 계산하는 기술.
현재 React는 생태계가 활성화되어 있고 사용자가 꾸준히 증가하고 있다.
CRA(Create-React-App)
CRA는 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구이다.
React는 UI 기능만 제공되기에 개발자가 직접 구축해야 할 것들이 많다. 처음 공부할 때 직접 개발 환경을 구축하기 힘들 수 있다. 그래서 CRA(Create-React-App)가 만들어졌다. CRA를 이용하면 하나의 명령어로 React 개발 환경을 순식간에 구축할 수 있다.
CRA에는 babel과 webpack과 같이 리액트 애플리케이션 실행에 필요한 다양한 패키지가 포함되어 있다. (git도 포함!)
CRA 설치
-
Desktop - wecode 폴더 진입
cd Desktop/wecode -
westagram-react 프로젝트 설치
npx create-react-app westagram-react -
my-app 프로젝트 진입
cd westagram-react -
로컬 서버 띄우기
npm start
CRA 구성
node.modules - package.json - .gitignore
1) node.modules
CRA 를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
2) package.json
CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
프로젝트에 하나씩 있다.
dependencies
- react를 사용하기 위한 모든 패키지 리스트와 버전 확인이 가능하다.
- 실제 패키지는
node.modules폴더에 있다.
★ 프로젝트 협업시 github에 불필요한 node.modules를 업로드하지 않는다. 다른 팀원이 pull하여 npm install만 하면 package.json에 기록된 패키지를 버전에 맞게 자동으로 설치한다.
3) .gitignore
.gitignore 파일에는 github에 올리고 싶지 않은 파일을 넣으면 된다.
index.html - index.js - App.js
1) public - index.html
<div id="root"></div>
2) src - index.js
React의 스타팅 포인트
ReactDOM.render( <App /> , document.getElementById('root'))
ReactDOM.render 함수를 사용하여 첫번째 인자는 화면에 보여줄 컴포넌트는 두번째 인자는 컴포넌트의 위치
3) src - App.js
현재 화면에 보여지고 있는 초기 컴포넌트
Component
React의 핵심은 바로 Component이다.
재활용 가능한 UI 구성 단위
예를 들어 하나의 웹페이지를 만든다고 할 때 Component로 나눈다면,
Navbar 컴포넌트 Main 컴포넌트 Aside 컴포넌트 등 과 같이 나눌 수 있다.
웹 개발에 있어 재사용이 되는 부분이라면 컴포넌트로 나눠 주면 된다.
Component 특징
- 재활용하여 사용 할 수 있다.
- 코드 유지 보수에 좋다.
- 해당 페이지가 어떻게 구성되어 있는지 쉽게 파악 할 수 있다.
- 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)
Component 종류
2가지가 있다.
1. 클래스형 컴포넌트 (Class Component)
import React, { Component } from 'react';
class main extends Component {
render() {
return (
<div>
</div>
);
}
}
export default main;클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환한다.
처음 React를 배울때 클래스형 컴포넌트로 학습하는 것이 좋다.
2) 함수형 컴포넌트 (Functional Component)
import React from 'react';
const main = () => {
return (
<div>
</div>
);
};
export default main;클래스형 보다 훨씬 간단하고 작성하기 편리하다.
★ Reactjs code snippets를 설치 후 rcc를 입력하면 클래스형 컴포넌트 , rsc를 입력하면 함수형 컴포넌트의 기본 템플릿을 생성 할수 있다.
JSX
JavaScript Syntax Extension
JSX란 리액트에서 사용하는 자바스크립트 확장 문법이다.
JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 Babel을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
JSX 특징
- HTML 태그를 그대로 사용하기 때문에 보기 쉽고 동시에 JavaScript도 JSX 안에서 동작하게 할 수 있다.
- class를 className으로 작성해야 한다.
- inline Styling 가능
<div style={{color: "blue"}}>FrontEnd</div> - Self Closing Tag
<div /> - 최상단 / 최하단에 모든 내부 요소를 감싸는 태그가 있어야 한다.
<>
<div className="loginBtn" onClick={() => console.log("click")}>Login</div>
<br />
<div style={{backgroundColor: "grey", height: "10px"}} />
</>