[React] 리액트 정의 및 특징

리액트란?

자바스크립트이 라이브러리중 하나입니다.

싱글페이지 플리케이션이나 모바일 애플리케이션개발 하이브리드 앱 개발에 사용됩니다.

자바스크립트에 HTML을 포함하는 JSX(JavaScript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다. 리고 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리입니다.

하지만! 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공하지 않아 라이브러리를 사용해야 합니다.

---

리액트의 특징

속성과의 단방향 데이터 바인딩

보통 props라 불리는 속성들은 부모 컴포넌트로부터 컴포넌트에 전달된다. 컴포넌트들은 props을 하나의 불변의 값(자바스크립트 객체)들로 받는다.

---

스테이트풀 컴포넌트

상태를 컴포넌트를 통해 값을 보관하며 props를 통해 차일드 컴포넌트로 전달할 수 있다.

function Main() {
  return (
    <div>
      <Header userId={userId}/>
      
  	</div>

  );
}

function Header(props) {
    return (
        <div className="page-header" style={Header}>
	        <h1  style={header_title}></h1>
            <span className = "header-user-id" >{props.userId}</span>
	    </div>
    );
}

 

---

가상 DOM

DOM Tree 생성

브라우저가 HTML 을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM 노드(Node) 로 이뤄진 트리를 만들어요. 각 노드는 각 HTML 엘리먼트들과 연관되어있죠.

Render Tree 생성

그리고, 외부 CSS 파일과 각 엘리먼트의 inline 스타일을 파싱해요. 스타일 정보를 사용하여 DOM 트리에 따라 새로운 트리, 렌더트리를 만들어요.

Render Tree 생성 – 그 뒤에선 무슨일이 일어나고 있는가..?

Webkit 에서는 노드의 스타일을 처리하는 과정을 ‘attachment’ 라고 불러요. DOM 트리의 모든 노드들은 ‘attach’ 라는 메소드가 있어요. 이 메소드는 스타일 정보를 계산해서 객체형태로 반환합니다.

이 과정은 동기적(synchronous) 작업이구요, DOM 트리에 새로운 노드가 추가되면 그 노드의 attach 메소드가 실행됩니다.

렌더 트리를 만드는 과정에선, 각 요소들의 스타일이 계산되구요, 또 이 계산되는 과정에서 다른 요소들의 스타일 속성들을 참조합니다.

Layout (reflow 라고도 불립니다)

렌더 트리가 다 만들어지고 나면, 레이아웃 과정을 거쳐요. 각 노드들은 스크린의 좌표가 주어지고, 정확히 어디에 나타나야 할 지 위치가 주어집니다.

Painting

그 다음 작업은 렌더링 된 요소들에 색을 입히는 과정입니다. 트리의 각 노드들을 거쳐가면서 paint() 메소드를 호출해요. 그러고나면, 스크린에 원하는 정보가 나타나는거죠.

---

라이프사이클 메서드

리액트는 인 메모리 데이터 구조 캐시를 만들고 결과 차이를 계산한 다음 브라우저에 표시되는 DOM을 효과적으로 업데이트한다. 이로써 프로그래머는 마치 모든 페이지가 변경될 때마다 렌더링되는 것처럼 코드를 작성할 수 있는데, 실제로 리액트 라이브러리는 단지 실제로 변경되는 하위 컴포넌트만을 렌더링할 뿐이다.

• shouldComponentUpdate는 렌더가 불필요한 경우 false를 반환함으로써 개발자가 컴포넌트의 불필요한 재렌더링을 막을 수 있게 한다.
• componentDidMount는 컴포넌트가 '마운트'(mount)되면 호출된다. (대개 컴포넌트 DOM 노드와 연결함으로써 사용자 인터페이스에서 만들어진다) API를 통해 원격 소스로부터 로드되는 데이터를 트리거(trigger)하기 위해 보통 사용된다.
• render는 가장 중요한 라이프사이클 메서드이며 어떠한 컴포넌트에서도 최소한의 필요 조건이다. 컴포넌트의 상태가 업데이트될 때마다 호출되는 것이 보통이며 사용자 인터페이스의 변경사항을 반영한다.

---

JSX

JSX(JavaScript XML)는 XML같은 문법을 사용하는 ECMAScript의 확장이다. HTML과 모습이 비슷해 보이는 JSX는 수많은 개발자들에게 친숙한 문법을 사용하여 컴포넌트 렌더링을 구조화하는 방법을 제공한다. 리액트 컴포넌트들은 일반적으로 JSX를 사용하여 작성되지만 꼭 그렇게 할 필요는 없다. (컴포넌트들은 순수 자바스크립트로 작성할 수도 있다)

내재된(nested) 요소

같은 레벨의 여러 요소들은 위와 같이 <div> 요소와 같이 하나의 컨테이너 요소로 감싸거나 배열로 반환해야 한다.

속성(Attributes)

JSX는 HTML이 제공하는 것을 미러링하도록 설계된 일련의 요소 속성들을 제공한다. 사용자 지정 속성들은 컴포넌트로 전달할 수도 있다. 모든 속성은 컴포넌트를 props로 받는다.

자바스크립트 식(JavaScript expressions)

자바스크립트 식(문은 아님)은 중괄호 {}를 사용하여 JSX 안에 쓸 수 있다

---

https://velopert.com/3236

 

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG

리액트 돔에관한 설명위 위 블로그의 포스팅을 보고 많은 도움을 받았습니다.