[React] 01. 리액트란 무엇인가?

서론

우선 리액트 공식 문서에서 리액트를 '사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리'로 소개하고 있다. SPA(Single Page Application)형태로 하나의 페이지에서 보여지는 컴포넌트 조합을 동적으로 바꿔가며 화면을 표현하는 형태다. Virtual DOM이라는 개념을 사용해 이러한 SPA를 구현하고 있다. 장, 단점이 존재하지만 자세한 내용은 나중에 다루도록 하겠다.

 

React 특징

1. Component 구조

2. JSX

3. Data Flow

4. Virtual DOM

 

 

1. Component

"컴포넌트"라고 불리는 작고 고립된 부품을 이용해 복잡한 UI를 구성하도록 해주는 것이 리액트이다. 컴포넌트에는 몇 가지 종류가 있다. 크게 2가지로 나누자면 '함수형 컴포넌트', '클래스형 컴포넌트'가 있다. 우선 클래스형 컴포넌트는 다음과 같은 구조를 가지고 있다. 아래에 간단한 예시를 작성해봤다.

class MyClassComponent extends React.Component {
    render() {
    	return(
            <div className="my-component">
            	<h1>Hello World!</h1>
                <ul>
                    <li>React!</li>
                    <li>React Native</li>
                </ul>
            </div>
        );
    }
}

이러한 컴포넌트는 재사용 가능하고 여러 컴포넌트들을 조합해 다양한 형태의 UI를 쉽게 만들 수 있다. 불필요한 반복적 코드를 줄이고 빠르게 UI를 구성할 수 있어 개발 생산성에 있어 장점을 가진다. 또한 작은 형태의 컴포넌트는 테스트하기 용이해 코드를 유지보수하기에도 도움이 된다. 아래에 여러 작은 컴포넌트를 조합한 예시 코드가 있다.

class App extends Component {
  render() {
    return (
      <Layout>
        <Header />
        <Navigation />
        <Content>
          <Sidebar></Sidebar>
          <Router />
        </Content>
        <Footer></Footer>
      </Layout>
    );
  }
}

 

 

2. JSX

리액트에서는 HTML의 태그 문법과 비슷한 형태로 ui 화면을 표현하고 있다. HTML과 비슷하지만 HTML과는 다르다. 리액트에서는 JSX라 하는 JavaScript를 확장한 문법을 사용한다. 간단하게 JavaScript이지만 화면을 표시하기 위해서 조금 더 확장된 개념이라고 보면 된다. 

JSX란?
Javascript를 확장한 문법입니다.

React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.

React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

출처: React 공식문서

 

 

3. Data Flow - 단방향 데이터 바인딩

단방향 데이터 바인딩은 간단히 말해 데이터의 흐름이 한 방향으로만 이뤄진다. 부모 요소에서 자식 요소로 전달이 되고 적절한 Event를 통해 데이터를 갱신하게 된다. 양방향 바인딩은 앱의 규모가 커질수록 추적하기 어려워지고 그에 따라 복잡해지게 된다. 이런 단점을 보완해 데이터 흐름을 보다 예측 가능하도록 하고자 리액트에서 단방향 형태로 바인딩을 하도록 했다고 한다. 단방향, 양방향 각각 장, 단점이 존재하기에 사용하는 프레임워크나 라이브러리에 따라 사용되는 데이터 바인딩 형태도 다 다르다. 조금 더 깊은 내용은 검색을 하면 많이 나오니 참고하면 될 것 같다.

 

 

4. Virtual DOM

브라우저는 화면을 그리기 위해서 DOM(Document Object Model)이라는 개념을 사용한다. DOM은 HTML 파일 내용을 토대로 만들어지는데, JavaScript와 같은 스크립팅 언어로 수정할 수 있도록 만들어진, 웹 페이지의 객체 지향 표현이다. DOM은 브라우저가 화면을 그리기 위해서 필요한 정보가 트리 형태로 저장된 데이터다. DOM에 변화가 생기면 렌더 트리를 재생성하고 레이아웃을 만들고 다시 보여주는 과정이 반복된다. DOM 트리가 재생성되는 과정에서 모든 요소들이 다시 계산되고 많은 연산을 반복하게 되면서 비효율적이게 된다. React에서는 이런 불필요하고 비효율적인 방식을 개선하고자 Virtual DOM이라는 개념을 도입했다.

React에서 Virtual DOM은 UI의 이상적인 또는 가상의 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍적 개념이다. 뷰에서 변화가 생기면 실제 DOM에 적용되기 전 가상 DOM에서 먼저 적용이 되고 비교를 통해 최종적 결과가 실제 DOM으로 전달이 된다. 이런 DOM 관리 과정을 리액트 내에서 자동화, 추상화를 통해 불필요한 연산 비용을 줄이고 성능을 높이도록 해준다.

 

참고자료: 리액트 공식문서 - Virtual DOM