1. 첫 React Component

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

function Hello() {
  return <div>Hello React!</div>
}

export default Hello;

# 리액트 컴포넌트는 (1) 함수 형태로 작성하는 방법, (2) 클래스 형태로 작성하는 방법이 있다.

# 리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있음 → JSX

export default Hello;

위 코드는 'Hello'라고 정의한 컴포넌트를 내보내겠다!는 의미.

→ 다른 컴포넌트에서 Hello를 불러와서 사용할 수 있다. UI 조각이라고 이해하면 쉬움! (하단 참고)

→ 컴포넌트를 여러 번 재사용 할 수도 있다.

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

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

export default App;

그 다음은 index.js

// 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 내부에 리액트 컴포넌트를 렌더링하겠다는 의미!

(이때 DOM의 id는 'root')

​

이 root라는 이름의 DOM은 public/inex.html에 있다

​

// public/index.html
<div id="root"></div>

즉, 렌더링될 리액트 컴포넌트가 내부에 렌더링되는 것!

 

출처 : https://react.vlpt.us/basic/03-first-component.html

3. 나의 첫번째 리액트 컴포넌트 · GitBook

 

react.vlpt.us