React

규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 된다. 그 중 가장 많이 쓰이는 세 가지가 Angular, Vue, React 이다.

Frontend Framework(Library)

Angular

TypeScript 기반으로 매우 안정적이고 탄탄한 Frontend App 개발이 가능하며 Framework답게 다양한 기능이 내장되어있다. 무겁고 배우기 어렵다는 단점이 있다.

Vue

코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼지만 성장 속도가 정말 빠르다.

React

사용자 인터페이스를만들기 위한 자바스크립트 라이브러리 Facebook에서 개발한 Library.  리액트는 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트한다
가상돔 = 실제 돔객체보다 가벼움 / 이전 ui상태를 메모리에 유지해서 , 변경될 ui의 최소 집합을 계산하는 기술

프레임워크 - 구조가 갖춰져 있다. 구조에 따라 개발을 한다.
라이브러리 - 함수, 메서드 같은 기능만 제공. 기존 틀 없이 라이브러리를 이용해서 코딩한다.

node.js : 탈 웹 .. 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경을 의미한다.

npm : node package manager , 패키지설치하고 버전 관리

CRA: crate react app , 리엑트 프로젝트를 시작하는데 필요한 개발 환겨을 세팅해주는 도구

node.modulse: 소스 코드가 있는 폴더 / 파일이 커서 깃허브에 안올림
package.json: 소스코드들의 이름을 명시한다 / 클론 받아서 npm install 하면 소스코드를 받아올수 있다.

import 불러오기 export 내보내기

component
재활용 가능한 ui구성 단위
코드 재활용 증가 , 유지보수 용이 , 파악 용이

클래스 형 vs 함수형

클래스 형 : 클래스형 컴포넌트에서는 위와같이 render 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환합니다.

import React from 'react'

class Component extends React.Component {
  render() {
    return (<div>
		<h1>This is Class Component!</h1>
		</div>
		)
  }
}

export default Component

함수형 : 간하고 작성하기 편리한 장점

import React from 'react'

const Component = () => {
  return (<div>
<h1>This is Functional Component!</h1>
</div>
		)
};

export default Component

JSX : 자바스크립트 확장문법