React 개념과 특징

REACT ??

페이스북이 만든 사용자 UI구축을 위한 라이브러리(프레임워크 위치에 있다고 봐도 무방)

재사용이 가능한 UI를 생성 할 수 있게 해준다.

이 라이브러리는 Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 UI를 렌더링한다.

따라서! 최소한의 DOM처리로 컴포넌트들을 업데이트 할 수 있게 해준다~!

 

할로

REACT 대표적인 특징

1. JSX문법

자바스크립트 안에서 HTML문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 확장 문법

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

JS안에서는 원래 저런 문법이 사용이 불가능하다, 하지만 JSX는 이를 가능하게 해준다!

JSX없이도 리액트로 개발이 가능하지만 다음과 같이 복잡한 코드가 발생해버린다... JSX짱짱

/*JSX사용X*/
class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

 

2. Component 기반

컴포넌트 기반 => 기존의 웹 페이지를 작성할 때처럼 하나의 HTML코드를 집어넣고 하는 것이 아닌, 여러 부분을 분할해서 코드의 재사용성과 유지보수성을 증가시킨다.

 

일부만 수정하고싶을 때 그 해당 부분을 찾아서.. 내가 수정해야하는 부분만 건드려야하는데 잘못해서 다른걸 건드리게 된다면...?(아찔..)

컴포넌트 기반인 리액트로 컴포넌트를 나눠서 개발하면 수정해야하는 그 부분의 파일만 수정하면 됨!

 

3. Virtual DOM

DOM이란?
: Document Object Model(문서 객체 모델)
객체를 통해 구조화된 문서를 표현하는 방법이며, XML 혹은 HTML로 작성된다.

웹 브라우저는 이 DOM을 활용하여 객체에 JS와 CSS를 적용한다! DOM은 트리 형태로 되어있어서, 특정 node를 찾을수도 있고, 수정할 수도 있고, 제거하거나 원하는 곳에 삽입할 수도 있다.

 

DOM의 문제

DOM에 가장 치명적인 문제점!! 동적 UI에 최적화되어있지 않다는 것!

규모가 크으으은 웹 어플리케이션에서 DOM에 직접 접근하여 변화를 주면, 성능상의 이슈가 조금씩 발생하기 시작한다.

DOM의 구조는 트리모델로 HTML구조와 같다. 만약 DOM의 변화가 일어나면, 브라우저가 다시 CSS를 연산하고, 레이아웃을 구성하고, 웹 페이지를 리페인한다.

불필요한 연산이 매번 발생한다는 문제가 있다는 것!

여기서 레이아웃을 새로 구성하면서 계산하는 것을 reflow라고 하고, 색상변경과 같은 레이아웃에 관계없는 것들을 처리하는 건 repaint라고 한다.

 

Virtual DOM

Virtual DOM은 변화를 가상돔에서 미리 인지해서 변화시킨다. 실제 DOM에 접근하여 조작하는 대신, 이를 추상화시킨 자바스크립트 객체를 구성하여 사용한다. like DOM의 가벼운 사본!

 

React 에서 데이터가 변하여 브라우저상의 실제 DOM 을 업데이트 할 때의 절차:
1. 데이터가 업데이트되면, 전체 UI 를 Virtual DOM 에 리렌더링
2. 이전 Virtual DOM 에 있던 내용과 현재의 내용을 비교
3. 바뀐 부분만 실제 DOM 에 적용

 

결국에는 컴포넌트가 업데이트 될 때, 레이아웃 계산이 한번만 이뤄짐 굳굳

 

BUT!

Virtual DOM을 사용한다고 해서 무조건 빠른 것은 아니다!

지속해서 데이터가 변화하는 대규모 애플리케이션 구축하기 등 적절한 곳에 사용해야 react의 진가를 발휘할 수 있다!

React 와 Virtual DOM이 우리에게 언제나 제공해 줄 수 있는 것은 업데이트 처리에 대한 간결함이다. UI 를 업데이트하는 과정에서 생기는 복잡함을 모두 해소해주고, 업데이트에 더욱 쉽게 접근 할 수 있게 해준다라다따