리액트 컴포넌트

리액트 컴포넌트

리액트 컴포넌트를 만들 땐 import 를 통하여 리액트를 불러와줘야 한다.

import React from 'react';

리액트 컴포넌트는 함수, 클래스 형태로 작성할 수 있다.

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

 

코드의 최하단에는 컴포넌트를 내보내주는 코드를 작성해준다.

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

컴포넌트는 일종의 UI 조각으로 쉽게 재사용할 수도 있다.

export default Hello;

 

Hello.js

import React from 'react';

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

export default Hello;

 

App.js

Hello.js 컴포넌트를 다른 컴포넌트인 App.js 에 불러온다.

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

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

export default App;

 

index.js

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

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

여기서 id 가 root 인 DOM을 선택하고 있다.

여기서 선택하고 있는 DOM은 public/index.html 을 열어보면 내부에 다음과 같이 root 를 찾을 수 있다.

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

결국 리액트 컴포넌트가 렌더링 될 때에는 렌더링된 결과물이 위 div 내부(실제 DOM)에 렌더링 되는 것이다.