[React] 기초부터 배우는 React : 구동 살펴보기

가상 DOM을 사용하는 리액트는 실제 DOM이 필요하다. 즉, 가상 DOM이 들어갈 빈 껍데기 html이 필요한데, 바로 그 빈 껍데기가 주로 index.html 파일이다.

여러 파일 중 index.js와 App.js가 어떻게 동작하는지만 알아도 리액트가 어떻게 동작하는지 알 수 있다.

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();

이 코드는 App.js에서 생성된 리액트 코드를 index.js에서 불러온 후, public에 있는 index.html의 id가 root인 곳에다가 넣는 코드이다.

이외 CSS를 넣는 코드나, 아니면 서비스 워커를 사용하는 코드는 없어도 된다. 부가사항이기 떄문이다.

App.js

import React, { component } from 'react';
import logo from './logo.svg'l
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;

이 코드는 리액트 코드를 생성하는 부분이다.
먼저 App이라는 클래스를 생성한 후, 리액트 컴포넌트를 상속받는다. 그렇게 되면 리액트 컴포넌트 메소드를 사용할 수가 있게 된다.

render()메소드는 리액트 컴포넌트인데, 화면에 html뷰를 생성해주는 역할을 한다. return으로 받는 값들은, 나중에 html코드로 바뀌게 된다. 그렇게 생성된 App클래스를 export 문법을 이용해서 내보낸다.

절차를 요약해서 살펴보면,
1. 리액트, 리액트 컴포넌트를 불러온다.
2. App 클래스를 만드는데, 그 클래스는 리액트 컴포넌트를 상속받는다.
3. 상속받은 리액트 컴포넌트 메소드 중, render()메소드를 활용해서 html 코드를 작성해 return시켜준다.
4. 이렇게 작성된 리액트 코드를 export를 시켜준다.

index.js에서 App을 불러와 사용할 때에 html코드를 사용하는걸(<App />)살펴볼 수 있는데, 모든 리액트 파일들은 전부 html코드처럼 사용할 수 있다. 이를 통해서 알 수 있는 것은 html 코드를 여러 개의 리액트 파일로 분할해서 작업을 할 수가 있다.

이러한 방식의 장점은 협업이 쉬워지고, 코드의 수정도 특정 부분만 하면 된다는 점이다.