React 기초

참고 https://slides.com/woongjae/react2021

1. React Concept

• View를 다루는 라이브러리
• Only Rendering & Update
  : NOT included another functionallity(ex. http client, ...)
• Component Based Development
  : 독립적인 코드 블럭(HTML + CSS + JS)
  : 작업의 단위
  : 사용자 component를 직접 제작 및 재사용
• Virtual DOM
  : DOM을 직접 다루지 않음
  : 가상 돔트리를 사용해 이전 상태와 이후 상태를 비교, 바뀐 부분만 자동으로 업데이트
• JSX
  : NOT Templates
  : transpile to JS(Babel, TypeScript)
• CSR & SSR
  : Client Side Rendering
  : Server Side Rendering

CSR & SSR

• Client Side Rendering
  HTML 다운로드 ⇒ JS 다운로드 ⇒ JS 내부 React 소스코드 실행 ⇒ React 앱 실행 ⇒ 화면 출력 ⇒ User interaction 가능
• Server Side Rendering
  HTML 다운로드 ⇒ 미리 렌더된 화면 출력*, JS 다운로드 ⇒ JS 내부 React 소스코드 실행 ⇒ React 앱 실행 ⇒ User interaction 가능

동작을 할 수 있는 단계는 모두 React 앱이 실행된 후로 동일하지만, SSR은 React 앱을 실행하기 전에 먼저 화면을 볼 수 있음

NPM trends

2. 개발 환경 체크

• Node.js(운영환경이 아닌 개발환경)
  : Installer
  : nvm
• Browser(Chrome)
• Git
• VSCode

3. 리액트 라이브러리

ReactDOM

• 리액트 컴포넌트를 HTMLElement에 연결하기
• import ReactDOM from 'react-dom'
• ReactDOM.render(...): 시작 함수 격

React

• 리액트 컴포넌트 만들기
• import React from 'react'

프론트엔드 변천사

고전 프론트엔드

HTML로 문서 구조를 잡고
CSS로 스타일을 입히고
JS로 DOM을 조작함

컴포넌트를 활용한 프론트엔드

컴포넌트를 정의하고,
실제 DOM에 컴포넌트를 그려준다.

const component = {
  message: "init",
  count: 0,
  render() {
    return `<p>${this.message} : ${this.count}</p>`
  },
};
function render(rootElement, component) {
  rootElement.innerHTML = component.render()
}
// 초기화
render(document.querySelector('#root'), component)
document.querySelector('#btn_plus').addEventListener('click', () => {
  component.message = 'update'
  component.count += 1
  render(document.querySelector('#root'), component)
})

리액트를 활용한 프론트엔드

const component = props => {
  return React.createElement('p', null, `${props.message} : ${props.count}`)
}
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')
  )
})