리액트를 다루는 기술 - 01. 리액트 시작

목록

1. 포스팅 개요
2. 본론
     2-1. 왜 리액트인가?
     2-2. 리액트의 특징
     2-3. 작업 환경 설정
3. 요약

1. 포스팅 개요

해당 포스팅은 리액트를 다루는 기술의 01장 리액트 시작 을 학습하며 정리한 포스팅이다.

2. 본론

2-1. 왜 리액트인가?

• 리액트

  • 최대한 성능을 아끼고 편안한 사용자 경험(user experience)을 제공하면서 구현하고자 개발한 것이 리액트(react)이다.
  • 오직 View만 신경 쓰는 라이브러리이다.

• 렌더링

  • 사용자 화면에 뷰를 보여주는 것

리액트를 사용하려면 리액트 컴포넌트가 최초로 실행한 '초기 렌더링'과 컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링' 개념을 이해해야한다.
컴포넌트는 데이터를 업데이트할 때 바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다.

2-2. 리액트의 특징

• 리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것이다.

  • DOM(Document Object Model)은 긱체로 문서 구조를 표현하는 방법이다.

• DOM은 치명적인 문제점이 있다.

  • 동적 UI에 최적화되어 있지 않다
  • DOM 자체는 빠르다.

Virtual DOM

• Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.
• 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 세 가지 절차를 밟는다.
  1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
  2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.
  3. 바뀐 부분만 실제 DOM에 적용한다.

리액트 매뉴얼은 다음과 같은 문장이 있다.(지금은 모름. )

우리는 다음 문제를 해결하려고 리액트를 만들었습니다.
지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기

메타 멋있따이

다른 웹 프레임워크나 라이브러리와 혼용가능하다.

• 리액트는 라이브러리이기 때문에 혼용가능하다.
• 리액트의 단점이라면 여러 라이브러리를 접해야한다.

2-3. 작업 환경 설정

이 부분은 따로

Node.js와 npm

• Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이다.

3. 요약

요약할 건 딱히 없다.
ㄹㅇ 개요다.