프레임워크 - React.js 리액트란?

React.js

React (이하 리액트)는 facebook이 제공하는 프론트엔드 웹 프레임워크로, SPA(Single Page Application)를 위한 사용자 인터페이스를 구축하는데 사용된다. 애플리케이션을 개발하기 위해서는 보통

1. 데이터를 처리하는 비즈니스 로직 (M),
2. 사용자가 조작하기 위한 UI (V),
3. UI를 컨트롤하기 위한 로직 (C)

등 3가지 부분으로 나뉘어 개발되는데, 이 방법론을 MVC 패턴이라고 한다. 여기서 리액트가 V를 완전히 담당하는 것이다.

 

 

리액트 로고

 

리액트의 특징

1. Data Flow (데이터의 흐름)

리액트는 단방향의 데이터 흐름을 가진다

 

2. Component (컴포넌트)

컴포넌트(Component)는 독립적인 단위의 소프트웨어 모듈을 말한다. 리액트는 UI (view)를 여러 컴포넌트로 쪼개서 만든다. 한 페이지 내에 각 부분들을 독립된 컴포넌트로 만들고, 이들을 모아 화면을 구성한다. 이렇게 컴포넌트 단위로 나누면 기능 및 UI 단위로 캡슐화하여 코드를 관리하기 때문에 재사용성이 높고, 유지보수가 쉬워진다. 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트(hook)가 있다.

// 함수형 컴포넌트의 예
function Component {
  render() {
    return (
      <Layout>
        <Header />
        <Navigation />
        <Content>
          <Sidebar />
          <Detail data={testData} />
        </Content>
        <Footer />
      </Layout>
    );
  }
}

위의 Component 라는 이름의 함수형 컴포넌트는 Header, Footer, Content 등의 컴포넌트로 구성되어 있고, Content 컴포넌트는 다시 Sidebar, Detail 컴포넌트로 구성되어있다.

 

3. Virtual DOM

리액트는 이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하여 필요한 최소한의 변경사항만 실제 DOM에 반영하기 때문에 앱의 효율성과 속도를 개선한다.

 

4. Props & State

Props란 부모 컴포넌트 에서 자식 컴포넌트로 전달하는 데이터를 말한다. 위 예에서는 Detail 컴포넌트로 testData라는 데이터를 data라는 이름의 props로 전달한다.

State는 컴포넌트 내부에서 선언하는 상태(동적인 데이터)를 말한다. 예를 들면, 사이드바의 열고 닫힌 상태를 true 또는 false로 관리할 수 있다.

 

5. JSX

JSX란 JavaScript에 XML을 추가하여 확장한 문법이다. 리액트에서 사용되지만 공식적인 JavaScript 문법은 아니며, 브라우저에서 실행하기 전에 Babel을 사용하여 일반 JavaScript 형태의 코드로 변환된다.

 

 

리액트 공식 문서

https://reactjs.org/

React – A JavaScript library for building user interfaces