[ReactJS] 튜토리얼(Tutorial) - 2

튜토리얼(Tutorial) - 2

리액트란 무엇일까?

틱택토 게임을 만들기 앞서서 우리가 그냥 넘어간 리액트의 개념이나 특징에 대해 알아보자.

리액트는 사용자 인터페이스를 구축하기 위한 효율적이고 유연한 '자바스트립트 라이브러리'이다.

리액트에서는 몇 가지 다른 종류의 컴포넌트들이 있지만 우리는 React.Component를 사용할 것이다.

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>                                                     
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}
 
// Example usage: <ShoppingList name="Mark" />

리액트는 컴포넌트 단위로 구성이 되며, 이 컴포넌트의 조합으로 페이지에 랜더링하게 된다.

리액트의 강점이라면, 데이터가 변경될 때 마다 감지하여 컴포넌트에서 랜더링이 일어나게 된다는 것이다.

위 코드에서 ShoppinList 클래스는 리액트 컴포넌트 클래스 또는 리액트 컴포넌트 타입이다.

컴포넌트는 props라는 인자를 사용하며, render 메소드로 뷰에 적용될 코드를 반환한다.

다시 말해 render 메소드는 뷰에 적용 되어 질 명세라고 할 수 있는데,

react는 이를 가져와서 화면에 랜더링 하게 되는 것이다.

대부분의 리액트 개발자는 이를 위해 JSX라는 특별한 문법을 사용하며, 뷰 구조에 대해 좀 더 쉬운 코딩을 가능하게 한다.

return React.createElement('div', {className: 'shopping-list'},                                           
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

JSX를 사용하면 좀더 쉬운 코드 작성이 가능하다고 했는데 

예를 들어 <div />라는 문법을 사용 하면, 빌드 시 React.createElement('div')로 변하게 된다.

만약 JSX가 없다면 위와 같이 일일히 React의 createElement를 사용해서 반환해 주어야한다.

React.createElement에 대해 자세히 알아보고 싶으면 공식 문서를 참조하기 바란다.

튜토리얼에서는 이를 대신하여 JSX 문법을 사용할 것이다.

React.createElement와 JSX와의 변환이 궁금하다면 다음 소스를 참고해보자

예제 코드

JSX의 또 다른 특징으로는 중괄호 내에서 자바스크립트의 문법을 사용할 수 있다는 것이다.

각 리액트 엘리먼트는 변수에 저장하거나 프로그램을 전달할 수 있는 실제 자바스크립트 객체이다.

따라서 자바스크립트 문법을 적용하여 반복문을 통한 객체 탐색이나 변수값 호출이 가능하게 된다.

다시 ShoppingList 클래스로 돌아가서, 코드 작성이 완료된 ShoppingList는 캡슐화 되었다.

이렇게 캡슐화된 컴포넌트는 독립적으로 작동할 수 있으며 각각의 컴포넌트를 호출하여 복잡한 UI의 구성이 가능하다.