React를 사용하는 이유

React

React는 Facebook에서 제공하는 프론트엔드 라이브러리이다. 주로 SPA(Single Page APplication)나 모바일 애플리케이션을 만들 때 사용된다.

 

 

React를 사용하는 이유

1. Virtual DOM의 사용

DOM은 Document Object Model의 약자이며 HTML, XML, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리한다.

기존의 DOM은 페이지가 바뀔 때 마다, 새 HTML을 로드하면서 DOM 전체를 변경한다.

 

React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다.

Virtual DOM은 가상의 Document Object Model을 말합니다.

 

실제 DOM을 제어하지 않고, 이벤트가 발생할 때 마다 Virtual DOM을 만들고, 화면을 다시 그릴 때마다 전후상태를 비교해 변경이 필요한 최소한의 사항만 실제 DOM에 반영해 앱의 효율성과 속도를 개선할 수 있다. 

이러한 작업을 Reconciliation(조화)이라고 한다.

 

[Virtual DOM의 내부 작동 원리]

Virtual DOM의 값을 직접 변경하면 안된다. 왜냐하면 React의 state는 불변성을 유지해야하기 때문이다.

컴포넌트는 setState를 비교해서 업데이트가 필요한 경우에만 render() 함수를 호출하는데, state를 직접 수정하게 되면 React가 render() 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있다.

따라서, Virtual DOM을 갱신하는 방법은 setState 메서드를 호출하거나

Redux의 경우 Dispatch를 하여 state가 변하면 다시 최상위 컴포넌트의 render() 함수를 호출해서 Virtual DOM을 갱신해야 한다.

 

2. Component 기반 구조

Component는 독립적인 단위의 소프트웨어 모듈을 말합니다.
즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있습니다.

React는 UI를 여러개의 컴포넌트로 쪼개서 만든다. 하나의 페이지 내에서 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성한다.

컴포넌트 단위로 쪼개져 있기 때문에 전체 코드를 파악하기가 상대적으로 쉽다.

기능단위, UI단위로 캡슐화시켜서 코드를 관리하기 때문에 재사용성이 높다.

따라서 코드는 반복될 필요 없이 컴포넌트만 import하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수 및 관리가 용이하다는 장점이 있다.

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

위와 같이 Header, Footer 같은 구조를 컴포넌트로 만들고, 이를 조합해서 Root Component를 만드는 방식이다.

 

3. JSX의 지원

JSX(JavaScript + XML)는 JavaScript를 확장한 문법이다.

아래 코드에서 HTML 태그와 유사한 <h1> 코드가 바로 JSX이다.

const element = <h1>Hello, world!</h1>;

React 공식문서 - JSX 소개

 

 

4. SSR, CSR 지원 가능

2022.10.06 - [프론트엔드] - 브라우저 렌더링 방식

 

5. 다른 프레임워크와 혼용 가능

React는 라이브러리이기 때문에 다른 프레임워크나 라이브러리와 함께 사용 가능하다.

 

 

---

Reference

• https://ko.legacy.reactjs.org/