React!

웹의 발전

html/css에서 js로 dom을 조작하고 event에 반응
웹의 발전에 따라 dom의 조작이 빈번해짐에 따라서 jquery가 등장
jquery는 번거로운 dom조작을 단순하고 쉽게 해준다 ->그러나 발전하는 웹에 한계에 도달하면서 Angular, Vue, React가 등장

프레임워크와 라이브러리

프레임워크와 라이브러리는 기술을 분류한 네임

공통점

• 프레임워크와 라이브러리 모두 다른 사람이 만들어 둔 코드를 사용

차이점

• 프레임워크는 다른 사람이 만든 틀안으로 들어가서 작업
• 라이브러리는 다른 사람이 만든 코드를 사용하여 작업

Angular

• 2010 구글에서 만든 프레임워크
• 프레임워크 다운 다양한 기능 내장
• typescript라는 엄격한 자바스크립트를 사용하여 안정적
• 배우기 어렵다

Vue

• 2014 에반유가 ㅏ개발한 프레임워크
• vue만의 문법과 규칙
• 프레임워크 다운 다양한 기능 내장
• 배우기 쉽다

React

• 2013 페북에서 개발한 라이브러리
• 지속적으로 데이터가 변화하는 대규모 어플리케이션을 구축하는것을 목표로 개발
• 프레임워크와 달리 오로지 view만 담당하는 라이브러리
• 프레임워크와 달리 내장기능은 부족해 third-party를 함께 사용하는 것이 일반적 (react-router-dom,redux)

Why React?

• 자바스크립트 문법을 그대로 사용
• 오픈소스 프로젝트로서 페북에서 지속적관리를함
• 사용자가 많아 커뮤니티/생태계가 잘 형성되어 있음
• 컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있음
• react를 기반으로 웹이 아닌 플랫폼에서도 활용할 수 있는 기술로 확장 가능

React?

" React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 Javascript 라이브러리 "

리액트 공식문서에서는
선언형, 컴포넌트 기반, 한 번 배워서 어디서나 사용하기로 소개하고 있다.

사용자 인터페이스 UI를 만들기 위한 Javascript 라이브러리

• 프론트엔트 라이브러리, 프레임워크를 사용하는 이유는 UI를 자동으로 업데이트하고 선언적 개발이 가능하다는 점
• UI를 자동으로 업데이트 하는 과정에서 Virtual DOM을 통해 최적화 구현.

그렇다면 선언적이란?

선언적 vs 절차적
절차적은 how로 접근한다. 어떻게 하고, 그 다음 무얼하고 이런느낌.. 선언적은 what에 대한 접근이다. 다시 말해, 최종목표에 대한 상상을 무엇인가에 전달하면 완성!

내가 위스타그램을 만든 방법이 절차적이라고 한다.
나는 매일매일 머리털을 5626291개씩 뽑았다.

Virtual Dom

virtual dom은 리액트가 화면을 업데이트하는 과정을 효율적으로 하게 하는 기술

dom을 매번 조작해서 작업하는 것은 비효율적 -> virtual dom이라는 가상의dom을 만들어 유지 -> 화면의 변화가 필요할 때 vitual dom이 필요한 dom을 계산하고 실제 dom에 한번만 수정

node & npm

자바스크립트 실행 환경 ex) Brower
node = 자바 스크립트 실행환경
brower 밖에서도 자바스크립트를 실행하게 할 수 있는 도구(자바스크립트의 탈웹)

프로젝트를 구성하기 위해 여러가지 패키지들을 사용하며 브라우저가 아닌 컴퓨터에 작업이 이루어져야 함. (자바의 탈웹!)

npm
node package manager
패키지 = 프로그램

프로젝트를 만들 때 필요한 패키지 (프로그램)을 관리하는 역할

CRA
crate react app

• 리액트는 ui구성 기능만 제공, 개발자가 직접 구축해야하는 것들이 많음
• 처음 시작 단계 어렵다
• cra는 웹 애플리케이션을 만드는 환경을 제공
• cra는 하나의 명령어로 리액트 개발환경 구축 가능

package.json

• 프로젝트 또한 하나의 패키지이기에 프로젝트의 정보를 담아놓은 파일
• 버전정보, 프로젝트 이름, 스크립트=실행 가능한 명령어 등이 담겨 있음
  nodemodules
• 다운로드된 모든 패키지들이 담겨 있는 파일
• 프로젝트를 위해 필요한 패키지
  gitigonore
• 깃으로 관리하지 않을 파일,폴더들을 두는 파일 깃푸쉬를 해도 적용되지 않는다.

Index.html
html의 엔트리 포인트
퍼블릭 폴더 하위 존재

Index.js
자바스크립트의 엔트리 포인트, 중간다리-html과 리액트 컴포넌트를 연결해주는 파일
import - 가져온다의 뜻
import React from "react"; - 노드 모듈에 있는 react에서 react를 가져온다

reactDom.render(<App /),document.getElementById("root"));
reactDom. - .객체접근하는 것 reactDom은 객체
render - 메소드
() - 함수호출
- 꺽쇠는 컴포넌트 의미
document.getElementById("root") - id가 root인 요소를 html에서 가져온다

= 첫번째 인자의 컴포넌트를 두번째 인자에 렌더링해준다

app.js
실제 화면에 보여지는 컴포넌트
리액트 함수형 컴포넌트는 태그와 비슷하다 ex)
태그와 구분법은 첫 글자가 대문자인지 아닌지

export default의 문법으로 내보내주어야 한다 ex) export default App;

Component

정의 - 재사용 가능한 각각의 독립된 모듈
프론트엔드 분야에 한해서 재사용 가능한 ui구성 단위

장점

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

class형 컴포넌트

import React from "react"

class login extends React.Component{
	render() {
    	return <h1>Login</h1>
        }
       }

class 형 컴포넌트는 초기에 많이 사용되던 형태
함수형에 비해 문법과 사용이 복잡

func형 컴포넌트는 클래스에 비해 간단하고 단순
초기에는 state를 관리하지 못한다는 단점으로 잘 사용되지 않ㅇㅁ
그러나 버전 업을 통해 state를 관리한다.

JSX

자바스크립트 확장 문법(JavaScript Syntax Extensin)
자바스크립트와 html을 합쳐놓은듯한 형태
마크업을 편리하게 작성하기 위한 문법
JSX로 작성한 코드는 자바스크립트가 인식할 수 없어 Babel이라는 패키지를 통해 변환해야한다

장점

• html.tag를 그대로 사용해 익숙함
• html마크업과 자바스크립로직을 같이 구현할 수 있다
  자바스크립트 문법을 이용해 html을 생성할 수 있다
  DOM + Event에 비해 훨씬 간편

특징

• 하나의 부모태그
• 모든 태그가 셀프클로징 가능
• camelCase Property
• 자바스크립트 동작 기능

하나의 부모태그로 감싸주기 위해 빈꺽쇠<>(fragment?)로 묶어줄 수 있다.