React란 무엇인가?

React는 사용자 인터페이스(UI)를 만들 때 사용하는 javascript 라이브러리입니다.

사용자 인터페이스란 사람과 컴퓨터가 상호작용하는 시스템입니다.

입력, 출력, 삭제 같은 수단이 있습니다.

React는 선언형, 컴포넌트 기반, 범용성이 있는 라이브러리입니다.

각각의 의미를 살펴보면

상호작용이 많은 ui를 만들 때 애플리케이션의 각 상태에 대한 뷰만 설계하고 데이터가 변경됨에 따라 관련된 컴포넌트만 효율적으로 갱신하고 렌더링하기 때문에 예측하고 디버그하는데 용이합니다.

컴포넌트를 조합해 ui를 만들기 때문에 다양한 형식의 데이터를 전달하기 편하고 dom과는 별개로 상태를 관리할 수 있습니다.(dom은 웹페이지에 대한 인터페이스입니다.)

react는 node 서버에서 렌더링 할 수 있고, react native으로 모바일 앱도 만들 수 있습니다.

정리하면 React는 뷰 설계를 통해 ui를 설계하고 컴포넌트를 조합해 ui를 만들기 때문에 데이터 전달, 페이지 렌더링을 효율적으로 할 수 있습니다. node서버에서, 모바일 앱 개발에서도 사용할 수 있습니다.

 

React의 기본요소에는 components, props, state가 있습니다.

React.component의 하위 클래스에 대해 알아보도록 하겠습니다.

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

// 사용 예제: <sns name="Mark" />

sns는 react의 컴포넌트 클래스, react 컴포넌트 타입입니다.

개별 컴포넌트는 props라는 매개변수에서 데이터를 받아오고 render함수로 표현하고자 하는 내용을 반환합니다.

render는 내용을 경량화하여 react엘리먼트로 반환합니다. 

위의 div태그는 빌드 시점에서 React.createElement()로 변환됩니다. 

아래와 같이 변환됩니다.

/*#__PURE__*/
React.createElement("div", {
  className: "sns-list"
}, /*#__PURE__*/React.createElement("h1", null, "sns List for ", props.name), 
/*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/
React.createElement("li", null, "Instagram"), 
/*#__PURE__*/React.createElement("li", null, "WhatsApp"), 
/*#__PURE__*/React.createElement("li", null, "Oculus")));

 

react는JSX와 같이 사용되는 경우가 많습니다.

JSX는 JAVASCRIPT를 확장한 문법입니다.

const hi = <h1>Hello, world!</h1>;

위와 같은 코드를 작성하는 것이 가능하도록 합니다.