React : Intro

React?

React는 Facebook에서 만든 것으로 사용자 인터페이스(UI)를 위한 JavaScript의 library이다.

Why react?

리엑트를 선택한 가장 큰 이유 중 하나는, 생태계가 잘 구성되어 있다. 많은 사용자들 덕에 다양한 학습자료를 쉽게 찾아볼 수 있다. 또한 페이스북에서 개발한 만큼 지속적인 관리를 기대할 수 있을 것으로 보인다.

react의 장점으로는

• 복잡한 업데이트를 다루지만 react에서 만들어진 App은 빠르다.
• code를 밀도 있게 작성할 수 있으며, 파일을 재 사용할 수 있다.
• 확장성이 있어 데이터로 얽힌 프로그램을 수행하는데 최적의 도구이다.

개발 환경 Setting

• 기본 프로그램
  Node.js : javaScript가 브라우저 밖에서도 동작하게 하는 환경
  프로젝트 개발 환경을 구축하는 주요 도구들이 Node.js 기반이다 (ex. CRA, Babel, Webpack)
  npm (node package manager) : npm을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다.
  CRA (Create-react-app) : 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해 주는 도구

• 구성내용
  node_modules: CRA를 구성하고 있는 package 소스 코드의 모음이다. 무거운 폴더이기 때문에 나중에 프로젝트를 git으로 관리할 때는 gitignore로 github와 연동되지 않도록 한다.
  package.json : dependencies > CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보 (종류/버전)가 기록되는 파일

  JSX?

  javaScript의 확장된 문법으로 React에서 사용되는 문법이다. JSX는 Html과 비슷하게 생겼지만 웹브라우저는 읽을 수 없다. 웹브라우저가 JSX 코드를 읽기 위해서는 JSX compiler가 필요하다. (JSX compiler로 보통 babel을 사용한다)

  JSX의 특징

  . Element 를 변수로 저장할 수 있다. (JavaScript)
  . attribute를 가질 수 있다. (Html)
  . 중첩된 형태의 코드를 작성할 때는 ()로 Element 요소를 감싸줘야 한다.

  const theExample = (
    <a href="https://www.example.com">
      <h1>
        Click me!
      </h1>
    </a>
  )

  .component는 하나의 최상위 태그만을 갖는다.
  만약 최상위의 태그가 의미를 갖지 않은 div 태그라면 react fragment(<>...</>)로 대체할 수 있다.
  . self closing 태그를 갖는다.

  ReactDOM

  reactDOM은 react library의 이름으로 이 library는 몇가지 중요한 method를 가지고 있다.

  • reactDOM.render() : JSX를 생성하는 가장 흔한 method로 JSX 표현식을 DOM tree에 생성할 때 사용한다.

    .render(element, container[, callback])
    render 안에 element는 JSX 표현식 또는 JSX의 표현식이 담긴 변수,
    container는 element가 append될 위치를 의미한다.

    reactDOM.render(<h1>render me!</h1>, document.getElementById('app'));

    Virtual DOM(VDOM)

    React는 요소들을 update할 때 virtual DOM을 전체적으로 update하고 이전의 DOM과 비교하여 바뀐 Element만 파악해서 정확하게 ReactDOM을 변경한다. 이 프로세스를 "diffing"이라고 한다.

    [update과정]

  1. virtual DOM이 전체적으로 update 된다. (현재 update)
  2. VDOM은 이전의 update 내용과 현재 update 내용을 비교한 뒤 변경된 부분을 확인한다.
  3. 변경될 부분이 있는 object만 실제 DOM에서 update를 한다.
  4. 실제 DOM의 변경된 내용만이 웹 페이지의 내용을 변경한다.