Framework & Library

공통점 : 다른 사람이 만들어 둔 코드
Framework
다른 사람이 만든 틀(Frame) 안으로 내가 들어가서 작업하는 것

• Angular
• Vue

Library
내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것

• React
  
  

📌 React

React란? 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리
시대적 요건에 따라 복잡성이 증가하여 기술 발전함에 따라 Front-end 도 같이 발전
· 2013년 Facebook에서 개발한 Library
· Angular, Vue 등의 다른 프레임워크와는 달리 오로지 View만 담당하는 라이브러리
· 그만큼 내장되어 있는 기능이 부족해 third-pary 라이브러리(ex.react-router-dom, redux)를 함께 사용한다.

• 자바스크림트 문법을 그대로 사용
• 오픈소스 프로젝트이면서 페이스북의 지속적인 관리가 이루어지고 있음
• 많은 사용자수를 기반으로 생태계가 활성화 되어있음
• 컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있음
• React Nateve 등의 웹이 아닌 플랫폼에서도 활용할수 있는 기술로 확장 가능

virtual-dom

가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술
리액트는 가상 돔(virtual-dom)을 만들어서 유지하고있다.
화면의 변화가 필요할때 마다 virtual-dom 안에서 미리 필요한 부분을 미리 계산하고, 실제 dom 에는 한번의 수정만 가하는 식으로 최적화를 구현하고 있다.
즉, 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.

Component

재사용 가능한 각각의 독립된 모듈 즉, 재사용 가능한 UI 구성 단위

장점

• 코드 재활용성 증가
• 코드 유지보수 용이
• 해당 페이지가 어떻게 구성되어 있는지 파악 용이
• 컴포넌트는 또 다른 컴포넌트를 포함(부모 컴포넌트 - 자식 컴포넌트)

Class 형 & Function 형

Class Component

• 초기에 많이 사용되던 컴포넌트 형태
• 함수형에 비해 문법과 사용법이 복잡함
• 하지만 클래스형으로 작성되어있는 기존 코드들도 많이 남아있기 때문에 읽고 해석할수 있어야함!

import React from "react"; 
class Login extends React.Component{
	render(){
    	return <h1>Login</h1>;
    }
}

Function Component

• 클래스형 컴포넌트에 비해 간단하고 단순
• 초창기에는 state를 관리하지 못한다는 단점으로 인해 잘 사용되지 않았음
• React 16.8 버전에서 hooks라는 기능이 추가되면서 state를 관리할 수 있게 되어 그 뒤로 자주 사용 됨
• 실제 현업에서 가장 많이 사용되고 있기에 함수형 컴포넌트 진행

function Login(){
	return <h1>Login</h1>;
}

JSX

• Javascript Syntax Extension
• Javascript 와 HTML 을 합쳐놓은 듯한 형태
• 마크업을 편리하게 작성하기 위한 문법
• JsX로 작성한 코드는 자바스크립트가 인식할 수 없는 문법이기에 Babel이라는 패키지를 이용해서 변환해줘야한다.

장점

• HTML tag를 그대로 사용하기 때문에 익숙함
• HTML 마크업과 Javascript 로직을 같이 구현할 수 있음
• Javascript문법을 이용해서 HTML을 생성할 수 있음
• vs DOM + Event

특징

• 하나의 부모태그
• 모든 태그가 셀프 클로징 가능
• camelCase Property
• javascript 동작 가증

📌 React CRA(Create-React-App)

리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain)
리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다.

1. node, npm 설치
   $ node -v
$ npm -v
2. CRA 설치
   npx create-react-app 프로젝트이름
3. 서버 띄우기
   npm start