ReactJS-01

‘리액트를 다루는 기술’ 이라는 책을 보면서 공부하고, 공부한 내용을 정리하는 목적

1. 리액트

사용자의 인터페이스를 만들기 위해 사용되는 자바스크립트의 라이브러리

  • 프론트엔드

    • 현재 자바스크립트만으로도 규모가 큰 애플리케이션을 만드는 시대
    • 대규모 어플리케이션 중 프론트엔트에서 돌아가는 애플리케이션 구조를 관리하기 위해 수많은 프레임워크가 존재
    • 주로 MVC(Model-View-Controller), MVVM(Model-View-View Model), MVW(Model-View-Whatever) 아키텍처로 구조화
    • 모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역, 뷰는 사용자에게 보이는 부분
    • 사용자에게서 어떤 작업을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영한다.

  • 리액트 등장

    • 변경된 부분이 발생하여 뷰에 반영을 할때 대규모 어플리케이션에서 하나의 요소를 찾아 내부를 수정하는 일은 비효율적(성능이 떨어짐)
    • 어떤 데이터가 변할때마다 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를 날리고 처음부터 새로 렌더링하는 방식을 채택
    • 리액트는 MVC, MVW 등의 프레임워크와 달리, 오직 V(view)만 신경쓰는 라이브러리
    • 컴포넌트(component)란 리액트에서 특정부분이 어떻게 생길지 정하는 선언체
      • 재사용이 가능한 API로 수많은 기능을 내장하고 있다.
      • 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.
    • 렌더링이란 사용자 화면에 뷰를 보여주는 것 : 초기렌더링, 리렌더링

  • 초기 렌더링

    • 맨 처음 어떻게 보일지를 정하는 초기 렌더링

    • render() {...}

    • 컴포넌트가 어떻게 생겼는지 정의하는 역할

    • 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환

    • 최상위 컴포넌트 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 이를 실제 페이지의 DOM 요소 안에 주입한다.

  • 조화 과정

    • 리액트에서 뷰를 업데이트할 때는 ‘조화 과정(reconciliation)을 거친다’ 라고 표현
    • 새로운 요소를 갈아끼움 → 이 작업 또한 render 함수
    • 컴포넌트는 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render함수를 또 다시 호출 → 그 데이터를 지닌 뷰를 생성
    • 이때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다.
    • 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 DOM 트리를 업데이트

2. 리액트 특징

  1. Virtual DOM
    • DOM : Document Object Model(객체로 문서 구조를 표현하는 방법)
    • DOM은 트리 구조
    • DOM 자체는 빠르지만 웹 브라우저에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하는 과정에서 시간이 허비된다.
    • DOM을 최소한으로 조작하여 작업을 처리하는 방식으로 개선(업데이트 처리 간결성)
    • Virtual DOM 방식 사용(실제 DOM의 가벼운 사본)
    • 웹브라우저에 DOM을 업데이트 할 시 다음 절차를 진행
      1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
      2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
      3. 바뀐 부분만 실제 DOM에 적용
  2. 라이브러리
    • 리액트는 프레임워크가 아니라 라이브러리
    • Ajax, 데이터 모델링, 라우팅 등의 기능을 내장하고 있지 않다. 직접 구현해야 사용하지만 리액트 관련 라이브러리가 많기 때문에 걱정 없음

3. 작업 환경 설정

  1. node js 설치

     $ node -v
 v14.17.1

  2. yarn 설치

     $ yarn --version
 1.22.10

  3. 에디터 설치

    • VScode

  4. Git 설치

  5. 프로젝트 생성

    •   # hello-react 라는 리액트 프로젝트 생성
  $ yarn create react-app hello-react

    •   # 서버 구동
  $ cd hello-react
  $ yarn start