리액트는 왜 쓰며, 리액트와 vue와 angular의 차이

REACT

• vue는 두마리 토끼 다 잡으려하는거고, angular는 내가 모든 걸 해줄게
• 리액트는 뷰랑 랜더링하는거에만 관심있음
• HTML태그들은 <h1> , <div> 이미 정해져있는 거지만, 리액트에서 ‘컴포넌트’는 이 태그들을 내가 직접 만든다고 생각하면 됌(css,js,html이 접목된 나만의 태그)
• 리액트 전까지는 실제 돔을 움직였는데, 리액트는 가상 돔트리를 사용

→ 가상의 돔을 가지고 있고, a상태의 벌츄어 돔과 b상태의 벌츄어 돔 상태를 비교해서 바뀐 부분만 찾아내서 바꿔주는 것

CSR vs SSR

Client Side Rendering : 기본적으로는 클라이언트사이드랜더링으로 간다.

리액트는 자바스크립트로 이루어진 하나의 커다란 웹어플리케이션이고, js가 모두 다운이 받아져야 리액트가 작동하게 된다.

html → js → 리액트 실행 → 보임

Server Side Rendering

이미 html로 표현되어진 html을 다운받게 된다.

html이 다운이 되면, 구성요소가 이미 렌더되고 있기 때문에 화면이 보일거고,

but !!!

js로 실행되는 행위들을 할 수는 없을 것

>> 리액트 개발환경체크

1. Node.js

+) nvm 추천한다고 하심

nvm을 통해 특정 node버전을 설치할 수 있음

1. Browser
2. Git
3. VS Code

>> 리액트 라이브러리

리액트의 핵심 모듈

import ReactDOM from “react-dom”
import React from “react”

ReactDOM : HTMLElement에 연결해주는 역할

React : 리액트 컴포넌트를 만들 수 있게 해줌

<리액트를 안쓰고 컴포넌트 만들시>

const component = {
	message : ‘init’,
	count : 0,
	render() {
			return `<p>${this.message} : ${this.count}</p>`
	}
}

// rootElement는 실제 돔을 받을거고, 
function render(rootElement, component){

		rootElement.innerHTML = component.render();
}

render(document.querySelector('#root'),component);

document.querySelector('#btn_plus').addEventListener('click', () => {component.message = 'update'; component.count=component.count+1 render(document.querySelector('#root'),component}; )

render ( ) { } : 실제로 HTML에 어떻게 표현되는지를 하나의 함수로 만든 것

 

버튼 
      // React.createElement( 태그 종류 , 태그 속성(ex.hello) , 태그 안의 children 내용 )
      // <p hello = "world">
      const Component = (props) => {
        return React.createElement(
          "p",
          null,
          `${props.message} : ${props.count}`
        );
      };

      // render(리액트컴포넌트, 리액트컴포넌트가 그려질곳(실제돔))
      ReactDOM.render(
        React.createElement(Component, { message: "init", count: 0 }, null),
        document.querySelector("#root")
      );

      document.querySelector("#btn_plus").addEventListener("click", () => {
        ReactDOM.render(
          React.createElement(
            Component,
            { message: "update", count: 10 },
            null
          ),
          document.querySelector("#root")
        );
      });
    

리액트 컴포넌트 만드는 방법

1. 함수형 컴포넌트

function 함수이름  (props) { 
				return <div>{props.message}</div>
}

ReactDOM.render(<함수이름/>,document.querySelector(’#root’))

1. 클래스 컴포넌트 : 클래스 컴포넌트에서 Props는 this로 넘어오게 된다.

class 클래스이름 extends React.Component {
	render() {
		return (
				<div>
					<h1>{this.props.message}</h1>
				</div>
		)
	}
}

ReactDOM.render(<클래스이름/>,document.querySelector(’#root’))

*default props