[React] Ⅰ. Intro

1. react란?

• 웹이 복잡해지면서 지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 등장한 라이브러리
• 사용자 인터페이스를 만들기 위한 javascript 라이브러리
• MVC(Model-View-Controller) architecture 중 view만 담당
• 가상돔(이전 UI상태를 메모리에 유지해서 변경될 UI의 최초집합을 계산하는 기술)을 통해 UI를 빠르게 업데이트함

2. 환경

1) Node.js

자바스크립트가 브러우저 밖에서도 동작하게 하는 환경

2) npm(Node Package Manager)

Node기반의 패키지를 사용하기위한 패키지 관리 도구

3) CRA(Create-React-App)

• 리액트 프로젝트를 시작하는데 필요한 환경을 세팅해주는 도구(toolchain)

(1) 기본 폴더 및 파일 구성

• node.modules
  CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
• package.json
  CRA기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)
• .gitignore
  github에 올리고 싶지 않은 폴더와 파일을 작성

---

App component가 index.js에서 첫번째 요소에 담겨져 있고, 요소들의 위치가 index.html에서 id가 root인 div로 지정되어 있다.△

• index.html

<div id='root'></div>

• index.js
  ReactDOM.render(<App/>, document.getElementById("root"))
  ReactDOM.render함수의 인자는 두 개
  첫 번째 인자는 화면에 보요주고 싶은 컴포넌트/두 번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치
  
• app.js
  현재 화면에 보여지고 있는 초기 컴포넌트
  Westagram작업시 Login 컴포넌트 / Main 컴포넌트

3. Component

재활용 가능한 UI 구성 단위

1) class component

import React, { Component } from 'react';
export class ReactComponent extends Component {
	render() {
		return <div>This is Class Component!</div>;
	}
}

export default ReactComponent;

• component 이름 대문자
• export

2) functional component

import React from 'react';
const ReactComponent = () => {
	return <div>This is functional component</div>;
  };
  
  export default ReactComponent;

4. JSX(JavaScript Syntax Extention)

리액트에서 사용하는 자바스크립트 확장 문법(Javascript 아님)
브라우저가 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 코드로 변환

1) 장점

• html태그를 그대로 사용하기때문에 익숙함
• html태그를 사용하는 동시에 자바스크립트도 JSX안에서 동작
  <button onClick={() => console.log('click')}>Click</button>

2) 특징

<>
	<div> className="loginBtn" onClick={{() => console.log("click")}}>Login </div>
    <br />
    <div style={{backgrounColor: "grey", height: "10px"}} />
<>