React

이제부터 React에 대해서 배워보도록 합시다. 실제로 프론트엔드 프레임워크 중 가장 많이 사용되기도 하는 React. 그리고 곧 시작하게 될 부트캠프에서도 React를 위주로 개발을 진행하게 되기 때문에 그전에 미리 기본 지식만 탑재하는 정도까지만이라도 만들려고 합니다. 그럼 본격적으로 React가 하는 일에 대해서 알아볼까요?

리액트가 하는 일

리액트의 핵심 모듈 2개로 리액트가 하는 일을 알아보도록 합시다.

// 1. 리액트 컴포넌트 => HTMLElement 연결하기
import ReactDom from 'react-dom';

// 2. 리액트 컴포넌트 만들기
import React from 'react'

1. ReactDom

ReactDOM.render(
  <HelloMessage name="Taylor" />
);

위와 같이 HelloMessage라는 컴포넌트를 HTML의 img, button 등과 같은 Element(요소)처럼 사용하고 있는 모습을 볼 수 있습니다.

그리고 이렇게 만들어진 리액트 컴포넌트를 화면에 렌더링을 하라고 명령을 하는 것이 ReactDom.render라는 함수입니다.

이렇게 render라는 함수는 JavaScript와 JSX 문법으로 작성된 리액트 컴포넌트를 HTML 요소로 만들어주는 역할을 하는 것입니다.

2. React

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    )
  }
}

위와 같이 react라는 라이브러리를 사용하여 컴포넌트를 만들게 됩니다. 자세한 내용은 차근차근 알아가보도록 합시다.

리액트 사용 방법

1. CDN

위와 같이 CDN을 통해 리액트 라이브러리를 사용할 수 있습니다. 해당 링크는 이 곳을 참고해주시면 됩니다.

2. 터미널 명령어

$ npx create-react-app begin-react
또는
$ create-react-app react-study

위와 같이 터미널 명령어로 설치하여 사용하는 방법도 있겠죠? 이 부분도 추후 자세히 알아보도록 합시다.