[React] Why React?

React는 페이스북에서 효과적인 UI 구축을 위해 만든 라이브러리다.

React, vue, angular 등 다양한 프론트엔드 SPA(Single Page Application) 프레임워크 중 React가 가장 많은 사용자들의 선택을 받을 수 있었던 요인에는 어떤 것들이 있을까?

특징 1. 선언형 UI

리액트에서는 이것을 아래와 같이 설명한다.

React는 대화형 UI를 만드는 데 어려움을 줄입니다. 어플리케이션의 각 상태에 대한 간단한 뷰를 설계하면 React는 데이터가 변경될 때 적절한 구성요소만 효과적으로 업데이트하고 렌더링합니다.

선언형 UI에서 state라는 개념이 중요한데, view(사용자의 눈에 보이는 화면 구성요소들)마다 state가 있고 이 값을 변경하면 새로운 화면을 생성하고 업데이트를 한다. 이러한 방식은 view를 업데이트하기 위해 state 값을 삭제 + 추가하지 않고, 변경만 해주면 되기 때문에 업데이트 시 복잡성을 줄여준다. 하지만 화면 전체를 재생성하는 데 있어 시간, 컴퓨팅 성능(computing performance) 등 비용이 많이 드는 문제가 있는데, React는 state 값이 변경되었을 때 view에서 변경이 필요한 요소들만 지능적으로 선택하여 변경하는 방식으로 이 문제를 해결했다.(Virtual DOM)

특징 2. 컴포넌트 기반

리액트에서는 이것을 아래와 같이 설명한다.

스스로 상태를 가지고 관리하는 캡슐화된 컴포넌트를 생성한 다음 복잡한 UI를 만들기 위해 구성합니다.

즉, 컴포넌트 기반인 React로 개발을 하면 하나의 HTML 코드를 작성하여 관리하는 기존의 웹페이지 작성 방식과는 달리, 파트 별로 파일을 분리해서 작성 + 관리를 할 수 있다. 만약 어떤 부분을 수정해야 한다면, 해당 부분을 담고 있는 파일만 수정해주면 된다.

특징 3. JSX 문법

JSX: React 기반 JS extension인데, HTML 문법으로 view를 구성하는 코드를 작성할 수 있어서 매우 편하다. 이해를 위해 아래 두개의 코드를 비교해보자.

JSX 문법을 사용하지 않은 코드

    const root = document.getElementById("root");
    const title = React.createElement(
      "h3",
      {
      	id: "title"
      },
      "Hello, I'm a title"
    );
    const btn = React.createElement(
      "button",
      {
        onClick: () => console.log("I'm clicked"),
      },
      "Click me"
    );
    const container = React.createElement("div", null, [span, btn]);
    ReactDOM.render(container, root);

JSX 문법을 사용한 코드

   const root = document.getElementById("root");
    const Title = () => (
      <h3 id="title">
        Hello, I'm a title
      </h3>
    );
    const Button = () => (
      <button
        style={{ backgroundColor: "tomato" }}
        onClick={() => console.log("I'm clicked")}
      >
        Click me
      </button>
    );
    const Container = () => (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(<Container />, root);

위 두 개의 코드를 통해 JSX 문법을 이용하면 훨씬 직관적으로 view를 구성할 수 있다.

JSX 문법은 브라우저가 이해할 수 없는 형태로 되어 있어 complie이 필요하다. 이때 사용되는 complier가 Babel이다. CRA(create-react-app)같은 개발 환경을 사용하지 않는다면, Babel을 따로 다운받아야 JSX 문법을 사용할 수 있다.

JSX 기본 문법

• JSX 문법에서 함수 형태로 새로운 태그를 구성할 때, 태그 이름의 첫 글자는 무조건 대문자여야 함
• JSX 문법에서는 따로 CSS 파일을 작성하지 않고 태그 내에 style props를 사용하여 스타일을 지정할 수 있다.
• JSX 태그 내에서 Javascript 언어(ex: 변수)를 사용하고 싶다면, 중괄호 내에 작성해주면 된다. (Data binding)
  ex: <태그>{변수}</태그>