[React] 간단한 프로젝트 구현해보기

간단한 리액트 프로젝트 구현해보기

이전 포스트에서 프로젝트를 생성하고 실행해봤다.

이제 직접 코드를 작성해보기 전에 프로젝트 내 src폴더 안에 있는 여러 파일들을 모두 삭제하자.

1. index.js 생성

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

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

• (줄 1~2) : react, react-dom 패키지를 불러오라는 설정이다. 번들링된 결과 파일에 이 패키지들의 소스코드도 포함되게 된다.
  
  
• (줄 3) : App.js 파일을 불러오라는 설정이다. 번들링된 결과 파일에 App.js파일의 소스 코드도 포함되게 된다.
  
  
• (줄 5) : ReactDOM이 render메소드를 이용하여 우리가 만든 컴포넌트를 렌더링한다. ReactDOM은 실제 페이지에 JSX형태의 코드를 렌더링할 때 사용되며 이 메소드의 첫 번째 인수는 우리가 렌더링할 JSX형태의 코드이다. 우리는 App컴포넌트를 렌더링할 거니까 첫 번째 인수에 <App/>을 적어준다. 이 메소드의 두 번째 인수는 이 컴포넌트를 렌더링할 element이다. 우리는 root element에 렌더링할 거니까 document.getElementById('root')를 적어준다. 그러면 index.html 파일에서 <div id="root">태그 내부에 <App />확장 태그가 출력된다. <App />는 html확장 태그이며, react.createElement("App", null)자바스크립트 코드로 변환된다. 이 태그는 App.js파일에 구현되어 있으며 App확장 태그에 해당하는 VirtualDOM자바스크립트 객체가 생성되고, 이 VirtualDOM객체가 <div id="root">태그 내부에 출력된다.

2. App.js 생성

import React from 'react';

class App extends React.Component {
    render() {
        return (
            <div>Hello World!!!</div>
        );
    }
}

export default App;

• (줄 1) : react패키지를 불러오라는 설정이다. 번들링된 결과 파일에 이 패키지들의 소스코드도 포함되게 된다.
  
  
• (줄 3~9) : React.Component클래스를 상속하여 App클래스를 구현한다.
  
  
• (줄 4~8) : render메소드는 <div>Hello World!!!</div> 표현식의 값을 리턴한다. 이 표현식은 .jsx확장 문법으로 구현한 표현식이며 프로젝트를 빌드할 때 순수한 자바스크립트 코드로 변환된다.
  
  
• (줄 11) : App.js파일을 import한 곳에서 App클래스를 사용할 수 있다는 뜻이다. export로 지정되지 않을 경우에는 다른 곳에서 사용하지 못하며 이 파일 내부에서만 사용할 수 있다(private). 또한 이렇게 export default App;라고 별도로 써주지 않고 애초에 class를 작성할 때 아래와 같이 작성해줘도 된다.

  export default class App extends React.Component {
      ...
  }

3. 실행

npm start