[React] React 기본 개념 (1) - Component

Component

✏️ 컴포넌트는 props를 input으로 하고 UI를 정의하는 React Element를 output으로 하는 함수이다.

.src/App.js

import React from 'react';
  
function App() {	// App 컴포넌트 정의
  return (		// App 컴포넌트는 HTML 반환
  <div>
    <h1>Hello</h1>
  </div>
  );
  }
  
export default App;

App() 함수가 정의되어 있고, <div><h1>Hello</h1></div> 를 반환하고 있다.
App() 함수가 반환한 HTML이 리액트 앱 화면에 그려진다.

.src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';	// App 컴포넌트를 임포트하여 사용

ReactDOM.render(<App />, document.getElementById('root');
// App 컴포넌트를 아이디가 'root'인 엘리먼트에 그린다

ReactDom.render() 함수의 첫 번째 인자로 <App />을 전달하면 App 컴포넌트가 반환하는 것들을 화면에 그릴 수 있다.
ReactDOM.render() 함수의 두 번째 인자로 App 컴포넌트가 그려질 위치를 전달한다.

---

리액트는 <App />과 같은 표시를 컴포넌트로 인식하고, 그 컴포넌트가 반환하는 값을 화면에 그린다.