[React] React? React!

React는 Facebook에서 제공해주는 Front-End 라이브러리로 SPA(Single Page Application)나 모바일 어플리케이션 개발 시 토대로 사용될 수 있다.

 

즉, 현재 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리이다.

(프론트 원탑 아닌가..?🤔)

 

React를 사용하지 않더라도, HTML, CSS, JS를 이용해서 웹 페이지를 만들수는 있지만, React를 사용하면 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있다.

 

이번 포스팅에서는 React의 특징을 간단히 알아보고, React에 대한 보다 자세한 내용은 앞으로의 포스팅에서 알아보자🤓

1. Data Flow

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다.

 

Angular.js와 같은 양방향 데이터 바인딩은 어플리케이션의 규모가 커질수록 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능하도록 하기 위해 단향향 흐름을 채택했다고 한다.

2. Component 기반 구조

Component는 독립적인 단위의 소프트웨어 모듈로 React는 UI를 여러 Component로 쪼개어 만든다.

 

한 페이지 내에서 각각의 여러 부분을 독립된 Component로 만들고, 이 Component들을 조립하여 화면을 구성한다. Component 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉽고 기능, UI 단위로 캡슐화하여 코드를 관리하기 때문에 반복하여 입력할 필요 없이 Component만 import해 사용할 수 있으므로 간편하고 재사용성이 높다.

 

어플리케이션이 복잡하더라도 코드의 유지보수, 관리가 용이해지는 장점이 있다. 아래와 같이 Header, Footer 같은 구조 등을 Component로 만들고, 이를 조합하여 Root Component를 만드는 방식이다.

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

3. Virtual DOM

DOM(Document Object Model)은 HTML, XML, CSS 등을 트리 수조로 인식하고, 데이터를 객체로 간주하여 관리한다.

 

React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다. 가상의 DOM인 Virtual DOM은 이벤트가 발생할 때 마다 Virtual DOM을 만들고, 다시 그릴 때 마다 실제 DOM과 전, 후 상태를 비교하여 변경이 필요한 최소한의 변경 사항만 실제 DOM에 반영해, APP의 효율성과 속도를 개선할 수 있다.

 

React를 파보고 싶었는데, 업무 중 React를 사용할 기회가 생겨 앞으로 열심히 파보겠다! ⛏️⛏️

 

참고 : https://velog.io/@edie_ko/React-JSX%EB%9E%80-%EB%A0%8C%EB%8D%94%EB%A7%81-Rendering%EC%9D%B4%EB%9E%80

https://velog.io/@jini_eun/React-React.js%EB%9E%80-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC