React(Libary)

• 사용자 UI를 만들기 위한 js 라이브러리

• 가상돔을 통해 UI를 자동으로 업데이트 해준다!
  즉, 데이터가 바뀐 부부만 재 랜더된다 라고 생각하면 된다.

• 지속적으로 데이터가 변화하는 대규모 앱을 구축하는것을 목표로 2013년 facebook에서 개발한 Libray의 개념이다.

• mvc에서 view만 담당한다 (view:사용자에게 보여지는것)

리엑트와 같은 프론트엔드 library 프레임워크를 사용하는 가장 큰 이유는??

사용자 UI를 자동 업데이트 해주기 때문
ex) 페이스북에 게시물을 자동으로 업데이트 시켜줄때 생각하면 된다!

많은 라이브러리중에서 react를 선택한 이유 ?

생태계가 활성화 되어 있어, 문제 해결시에도 도움을 받을 수 있고 추후 미래성이 잘 판단된다고 보고있다.

Settings

Node.js / CRA가 필요하다.
node를 만들면 npn은 자동으로 만들어진다.

node.js란?

자바스크립트가 브라우저 밖에서도 동작 할 수 있게 한다.
ex)자바스크립트에 탈 웹이다!

node를 설치하고 버전확인!

터미널 간지가 나지않는다. 바꿔 줄 필요가 있다 ㅎㅎ

CRA가 필요한 이유:

react는 UI기능만 제공해서 스스로 구축해야하는 반면,
CRA는 하나의 명령어로 개발환경을 편리하게 사용 할 수 있다 !
리엑트를 배우고 있는 단계에서 새로운 싱글 페이지 앱을 만들 수 있기에 사용했다.

compoments vs pages

components

여러 페이지에 공통적으로 들어가는것
ex) 헤더,푸터,네브바

pages

각각 다른 페이지일 경우?
src 폴더
components 폴더
pages 폴더
/login / login.css /login.js
main 폴더

js 임폴트 하는방법:

import React from "react"

Component 종류

class 와 함수 컴포넌트 두가지로 나뉜다.
클래스형은 rander함수가 포함 해야한다.

JSX

js 확장 문법이다.
브라우저가 동작하면서 바벨을 사용하여 js 형태의 코드

총 3가지로 나뉜다

html문서 / index.js / 구현할.js

class형 컴포넌트

예시로 다음과 같다.

Login.js

class Login extends React Component{
	rander(){
    	return(
    	<div></div>
        )
    }
}
export default Login;

index.js

import ReactDOM from "react-dom";
import "./index.css";
import Login from "./pages/Login/Login";
ReactDOM.render(</>, document.getElementById("root"));

셋팅 방법에 대해 알아보자

• React에서 class는 ClassName으로 지정해줘야한다 !!!!
  유용한 tip : 지정한 함수 전체선택 cmd + shift + L
• 클로징 태그로 반드시 태그를 닫아줘야 한다!