[React] 리액트 기본 특징 간단 정리

리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스(UI)를 만들기 위해 사용되며, 현재 가장 인기 있는 자바스크립트 라이브러리라고 볼 수 있다.

 

리액트를 사용하지 않아도 바닐라 JS를 사용해 개발할 수 있지만, 리액트를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있다.

 

리액트의 특징 몇 가지를 알아보자.

1. 컴포넌트 기반
2. props
3. 단방향 데이터 바인딩
4. 가상 돔(Virtual DOM)
5. JSX

 

컴포넌트 기반

컴포넌트는 독립적인 단위의 소프트웨어 모듈을 말한다. 즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있다. 리액트는 UI를 여러 컴포넌트로 쪼개서 만든다. 한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성한다.

컴포넌트 단위로 쪼개져 있어서 전체 코드를 파악하기가 상대적으로 쉽다. 이렇게 기능 단위, UI 단위로 코드를 관리하기 때문에 재사용성이 높다. 따라서 코드를 반복해 입력할 필요 없이 컴포넌트만 import 해 사용하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수와 관리가 용이하다는 장점을 가진다.

export const Layout = ({ children }) => {
  return (
    <Layout>
      <Header />
      {children}
      <Footer />
    </Layout>
  );
};

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

 

props

props는 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다. 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.

 

리액트의 대표적인 훅인 useState를 사용해 상태 변경 함수를 props로 내려받으면 자식 컴포넌트에서 부모 컴포넌트의 데이터 상태를 변경할 수 있다.

 

단방향 데이터 바인딩

컴포넌트 내에서 단방향 데이터 바인딩은 Javascript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 것을 의미한다.

단방향 데이터 바인딩이기에 역으로 HTML(View)에서 JS(Model)로의 직접적인 데이터 갱신은 불가능하다. 이벤트 함수 onClick, onChange 등으로 함수를 호출한 뒤 JS에서 HTML로 데이터를 변경해야 한다.

컴포넌트 간에서 단방향 데이터 바인딩은 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되는 구조다.

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

 

가상 돔(Virtual DOM)

DOM(Document Object Model)은 HTML, CSS 등을 트리 구조로 인식하고 데이터를 객체로 간주하고 관리한다. 리액트는 이 DOM 트리 구조와 같은 구조체를 가상으로 가지고 있다.

 

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

 

JSX

리액트에서는 JSX라는 독특한 문법을 가지고 있다. JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트를 바로 사용할 수 있는 일종의 템플릿 언어(Template language)다.

const App = () => {
  const text = "Hi JSX";
  return <div>{text}</div>;
};

리액트는 위와 같이 자바스크립트에서 HTML 태그를 사용할 수 있으며, 자바스크립트 변수를 HTML 태그에서 바로 호출해 사용할 수 있다.

 

뜬금없지만 비슷한 예시로 자바의 JSP(Java Server Pages)에서도 HTML 태그 안에서 자바의 변수를 사용할 수 있다.

<div><%= text %></div>