나의 첫번째 리액트 컴포넌트

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

src디렉터리에 Hello.js라는 파일을 다음과 같이 작성해보자.

 

Hello.js

import React from 'react';

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

export default Hello;

리액트 컴포넌트를 만들 땐

import React from 'react';

를 통하여 리액트를 불러와 줘야 된다.

리액트 컴포넌트는 함수형태로 작성 할수도 있고 클래스 형태로도 작성할수 있다. 지금은 함수로 작성하는 방법만 해보자.

 

리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있는데 이를 JSX 라고 부른다.

 

코드의 최하단

export default Hello;

이 코드는 Hello라는 컴포넌트를 내보내겠다는 의미이다.

이렇게 해주면 다른 컴포넌트에서 불러와서 사용할수 있다.

 

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

 

App.js

 

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

상단에 있던

import logo from './logo.svg';
import './App.css';

는 SVG파일을 불러오고 CSS를 적용하는 코드인데 이는 현재 불필요 하므로 제거해 주었다.

컴포넌트는 일종의 UI조각이다. 그리고 쉽게 재사용 할수 있다.

import React from 'react';
import Hello from './Hello';


function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
    </div>
  );
}

export default App;

이제 index.js를 열어보자.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

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

id 가 root 인 DOM 을 선택하고 있는데, 이 DOM 이 어디있는지 찾아보자

 

public/index.html을 열어보면 내부에

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

을 볼수 있다.

결국, 리액트 컴포넌트가 렌더링 될떄에는 렌더링된 결과물이 위 div내부에 렌더링 되는것이다.