React 이해하기

React 이해하기

 

React를 공부하면서 리액트를 왜 사용해야 하는지 리액트가 정확히 무엇인지, 특징은 무엇인지 한번 정리하는 시간을 가지려고 한다. 이러한 이유들을 알고 나면 좀 더 리액트를 이해하는 데 도움이 될 거라고 생각한다.

 

React란 무엇인가?

---

React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다. 주로 인터렉션(상호작용)이 많은 웹 앱을 개발할 때 사용된다. 리액트는 주로 UI 렌더링에 관여하며, 그 외의 라우터, 상태 관리와 같은 기능들은 리액트 생태계에서 사용되는 여러 라이브러리들의 도움을 받는다. 즉 리액트는 UI를 렌더링 하는데 사용되는 라이브러리이다.

 

React의 특징

---

1. 컴포넌트 개념을 사용하여 UI를 구성한다.

React는 컴포넌트 개념을 사용하여 UI를 구성한다. 기존에는 Class형 컴포넌트가 주로 사용되었지만 React hook의 등장 이후로 함수형 컴포넌트를 주로 사용한다. "그렇다면 함수형 컴포넌트만 이해하면 되느냐?" 는 아니다. 기존의 레거시 한 것들은 클래스 형 컴포넌트를 사용한 것들이 있기 때문에 클래스 형 컴포넌트 또한 이해해야 한다.

 

2. 가상 돔(Virtual DOM)을 사용한다.

CRP 과정

 

브라우저가 서버에서 응답을 받아 화면을 구성하기 위해서 실행하는 과정을 CRP(critical Rendering path)라고 하는데 CRP는 여러 단계가 구성되어 있다. DOM tree, JS, CSSOM 을 가지고 화면에 렌더링 할 내용을 나타내는 Render Tree를 만들고 화면을 그리는 것을 말한다. 이때 JS, CSS를 통해 DOM과 CSS에 변화가 생기면 CRP 과정을 다시 한번 거치게 된다. 즉 인터렉션이 많아지면 DOM을 조작하는 비용이 증가하기 때문에 가상 돔(virtual DOM)을 만들어서 사용한다. 그렇기 때문에 변화가 생기는 것을 가상돔에 먼저 렌더링 한 후에 비교를 통해 변경된 부분을 DOM에 적용하며, 브라우저의 렌더링 과정을 줄이며 개선하기 위해 가상 돔을 사용한다.

 

3. JSX 문법을 사용한다.

JSX는 JavaScript XML의 약자로 자바스크립트, HTML과 유사한 형태를 가지고 있다. 자바스크립트에 HTML을 포함하는 일종의 템플릿 언어이며 HTML 내에서 자바스크립트 표현식을 사용할 수 있다는 특징이 있다. JSX는 생산성과, 가독성 면에서 장점이 있지만 자바스크립트 코드가 아니기에 브라우저가 이해할 수 없고 이를 Babel 과 같은 변환 도구를 사용해서 자바스크립트 코드로 변환하여 준다.

import React from 'react';

function Hello(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Welcome to React and JSX!</p>
    </div>
  );
}

export default Hello;

 

import React from 'react';

function Hello(props) {
  return React.createElement(
    'div',
    null,
    React.createElement('h1', null, 'Hello, ', props.name, '!'),
    React.createElement('p', null, 'Welcome to React and JSX!')
  );
}

export default Hello;

 

Hello 컴포넌트가 JSX 문법으로 작성된 예시이고, 그 다음은 Hello 컴포넌트가 Babel 과 같은 변환 도구를 사용하여 변환한 자바스크립트 코드이다. 이러한 JSX 문법을 사용할 때 몇 가지 특징과 주의사항이 있다. 이 부분에 대해서는 추가로 나중에 정리하려고 한다.

 

4. 단방향 데이터 흐름

리액트에서는 단방향 데이터 흐름을 가지고 있다. 쉽게 말해 데이터의 흐름이 한 방향인데 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐른다고 생각할 수 있다. 그렇기 때문에 코드의 흐름을 이해하기 쉽고, 데이터의 추적과 디버깅이 편하다는 장점이 있으며, 데이터가 변화하더라도 성능 저하 없이 DOM을 갱신할 수 있다는 장점이 있다

 

5. 선언적 프로그래밍

리액트는 JSX 문법을 사용하면서 선언형 프로그래밍을 적극 활용하고 있다.