[React] 첫 번째 리액트 컴포넌트

  리액트 컴포넌트를 만들어 보자.

  먼저 src 디렉터리에 Hello.js라는 파일을 만들고 아래와 같이 작성한다.

 

import React from 'react';

function Hello() {
  return <div>안녕하세요</div>
}

export default Hello;

 

 

  리액트 컴포넌트를 만들 땐 우선 상단에서 다음과 같은 코드를 입력해야 한다.

import React from 'react';

 

  이 코드는 리액트를 불러와서 사용하겠다는 것을 의미한다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데, 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다. 그리고 이렇게 import 구문을 통해 리액트를 불러와서 사용할 수 있는 것이다.

 

∴ 사실 이렇게 모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능이다. 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기능이다. 참고로 Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다.

 

 

  리액트 컴포넌트를 만들 땐 함수형과 클래스형이라는 두 가지 작성 방법이 있다. 지금은 먼저 함수로 작성하는 방법에 대해서만 알아보도록 하겠다.

 

function Hello() {
  
}

 

  이제 Hello라는 이름의 컴포넌트를 function 키워드를 사용하여 만든 것이다. 이러한 컴포넌트를 함수형 컴포넌트라고 부른다. 그리고 이제 XML 형태의 값을 리턴해 줘야 한다.

 

function Hello() {
  return <div>안녕하세요</div>
}

  마치 HTML을 작성한 것 같지만 이와 같은 코드는 JSX라고 한다.

 

 

export default Hello;

  그리고 맨 아래의 코드는 만들어진 Hello라는 컴포넌트를 내보내 주겠다는 것을 의미한다. 이렇게 하면 다른 컴포넌트에서 Hello 컴포넌트를 불러와 사용할 수 있다.

 

 

  이제 이 컴포넌트를 App.js에서 불러와 사용해 보겠다.

import React from 'react';
import Hello from './Hello';
function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}
export default App;

  두 번째 라인은 Hello 컴포넌트를 불러오는 역할을 한다. 여기서 .js는 생략할 수 있다.

  컴포넌트는 일종의 UI 조각이고 여러 번 재사용할 수도 있다.

 

import React from 'react';
import Hello from './Hello';
function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
    </div>
  );
}
export default App;

 

---

 

  이제 index.js를 보자. 아래와 같은 코드가 보일 것이다. 

 

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

 

  여기서 ReactDOM.render()의 역할은 id가 root인 DOM을 찾아 브라우저에 있는 실제 DOM의 내부에 리액트 컴포넌트를 렌더링하겠다는 것을 의미한다.

 

  id가 root인 DOM은 public/index.html 내부에 다음과 같은 element가 있다.

<div id="root"></div>

 

  결국 리액트 컴포넌트가 렌더링될 때는 렌더링의 결과물이 HTML 형태로 만들어져서 위의 id가 root인 element에 삽입이 된다는 것이다.

 

 

 

※ 위 내용은 패스트캠퍼스에서 제공하는 React Online Tutorial을 토대로 정리한 글입니다.

 

참고 자료

김민준(2020). 리액트를 다루는 기술, 개정판. (주)도서출판 길벗.

react.vlpt.us/basic/03-first-component.html