React: 시작하기

React Concept

• Component

  img, div같이 이미 정해진 태그 이름이 아닌, 내가 직접 만든 태그이다. 즉, 내가 정의한 컴포넌트이다!

  src, class, name, props는 밖에서 넣어주는 데이터이다.
  html, css, js를 합쳐서 내가 정의한 이름으로 정의하여 남들도 사용할 수 있고 나도 재사용이 가능한 태그(같은 것)이다.

• Virtual DOM

  react는 DOM을 직접 제어하지 않는다.
  가상의 돔 트리를 사용해서, 이전 상태와 이후 상태를 비교하여 바뀐 부분을 찾아 자동으로 바꿔준다.

  달라진 부분을 찾아서 diff로 달라진 부분과 해당 하위를 달라진 내용으로 변경해준다.

• CSR (Client Side Randering)

  js가 전부 다운로드 되어 react 앱이 정상 실행되기 전까지 화면에 보이지 않는다. js가 전부 다운되어 react 앱이 정상 실행된 후, 화면이 출력되며 유저가 인터랙션이 가능해진다.

  html 다운 → js 다운 → js 안에서 react 앱을 실행 (아직 화면에 보이는 것 없음) → react 내부의 컴포넌트가 화면에 출력 → user에게 보임

• SSR (Server Side Randering)

  js가 전부 다운되지 않아도 화면에 보인다. 하지만, 유저가 사용할 수는 없다. js가 전부 다운되어 react 앱이 정상 실행되면 유저가 사용이 가능하다.

  html 다운 → js 다운(과 동시에 이미 랜더링 된 html 파일이 화면에 보임, 단 동작은 되지 않음) → react 앱 실행 (js까지 다운된 화면 보임) → react 화면 출력 (완벽한 웹 사용 가능)

React 라이브러리

• React 핵심 모듈

  // 1
  import ReactDom from 'react-dom';
  // 2
  import React from 'react';
  

  1. ReactDom은 리액트 컴포넌트로 HTMLElemnet와 연결한다.
  2. React는 리액트 컴포넌트를 만든다.

• react 시작

  # npm 프로젝트 만들기
  npm init -y
    
  # 파일 서버처럼 관리
  npx serve
  

• react CDN

  CDN 링크: React

• react로 render

  바닐라 js는 값들이 변경될 때마다, render를 해줘야 한다.
  처음 초기화 할때와 값이 바뀔때마다 계속 render를 해줘야 하는데, react는 이걸 좀 더 간편하게 해준다.

  const Rㅣ액트컴포넌트이름 = props => {
    return React.creatElement(
      규정할 것, 넣어줄 값, 
      태그 안에 들어갈 것
    );
    // 예시
    return React.creatElement(
      'p', 
      null, 
      `${props.message} : ${props.count}`
    );
  }
    
  ReactDOM.render(리액트 컴포넌트, 실제로 그려질 곳)
  // 예시
  ReactDOM.render(
    React.createElement(Component, {message: "init", count: "0"}, null),	
    document.querySelector('#root')
  );
  

  리액트 컴포넌트는 기본적으로 함수라고 생각하면 된다.
  인자로 props가 들어오고, 함수 안에서 꼭 return을 해줘야 한다. return을 할때, react의 element로 return이 돼야한다.
  react element는 실제 dom element가 아니고 react가 규정하는 방식으로 만들어진 element를 의미한다.