[React] 리액트 시작하기 - 컴포넌트와 렌더링

리액트는 앞에 언급했듯이 웹 애플리케이션에서 사용하는 UI를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수성을 높여줍니다.

컴포넌트에 해당하는 소스를 App.js에서 확인해 보자.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

이 코드를 또 작게 나누어서 해석해보자.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

첫째 줄은 React와 {Component}를 불러온다 'react'에서 , 여기서 React를 불러오는 이유는 파일에서 JSX를 사용하기 위함.

두번째 줄은 logo를 ./logo.svg 에서 가져오고

세번째 줄은 ./App.css를 가져옴.

이 import는 Webpack을 사용하기 때문에 가능한 작업.

다음 컴포넌트로 넘어가자.

class App extends Component {
  ...
}

컴포넌트를 만드는 방법은 1. 클래스를 통해 만들기, 2. 함수를 통해 만들기가 있는데 2.는 나중에 알아보도록 하고  우선 클래스를 통해 만들어 보도록 하자.

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }

클래스 형태로 만들어진 컴포넌트

-꼭 render 함수가 있어야 함

-내부에서는 JSX를 return 해주어야 함. 위의 HTML 같은 코드가 JSX임.(return 블록)

 

그리고 마지막 줄에 있는 코드를 보면 작성한 컴포넌트를 다른곳에서 사용할 수 있도록 내보내기를 해줌

export default App;

이 컴포넌트가 어떻게 사용되는지를 보기위해 index.js파일을 보자.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

import App from './App';

코드를 보면 위와 같이 import App from './App'; 이라는 코드로 위에서 App으로 내보내기 했던 컴포넌트를 불러와서 사용하는 것을 볼 수 있다.

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

그리고 브라우저 상에 우리의 리액트 컴포넌트를 보여주기 위해서는 ReactDOM.render 함수를 사용한다. 첫번째 파라미터는 렌더링 할 결과물이고, 두번째 파라미터는 컴포넌트를 어떤 DOM 에 그릴지 정해줍니다.

id 가 root 인 DOM 을 찾아서 그리도록 설정이 되어있는데, 해당 DOM 은 public/index.html 파일에서 찾아볼 수 있다.

해당 파일 안의 <div id="root"></div>를 찾아서 렌더링 해주게 됨.

 

출처 - 벨로퍼트님 블로그