React/기초

[React] Component

고기고기물고기 2022. 7. 5. 11:14

https://goddaehee.tistory.com/299

 

[React] 4. React 컴포넌트(1) - 컴포넌트란?

4. React 컴포넌트(1) - 컴포넌트란? 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 컴포넌트에 대한 기본 내용 ] 입니다. : ) 리액트 공식 문서, 자습서에서 함수형 컴포넌트, 클래스형 컴포넌

goddaehee.tistory.com

 

import Header from './head';
import Side_bar from './side_bar';
import Index_main from './index_main';
import Footer from './footer';
import React from 'react';
import ReactDOM from 'react-dom/client';

import '../assets/css/style.scss'

//ReactDOM.render(<Head />, document.getElementById('head'));toggle-sidebar-btn
//ReactDOM.render(<Side_bar />, document.getElementById('side_bar'));

const head = ReactDOM.createRoot(document.getElementById("head"));
head.render(
    <React.StrictMode>
      <Header />
    </React.StrictMode>
  );

const side_bar = ReactDOM.createRoot(document.getElementById("sidebar"));
side_bar.render(
    <React.StrictMode>
      <Side_bar />
    </React.StrictMode>
  );
const main = ReactDOM.createRoot(document.getElementById("main"));
main.render(
    <React.StrictMode>
      <Index_main />
    </React.StrictMode>
  );
const footer = ReactDOM.createRoot(document.getElementById("footer"));
footer.render(
    <React.StrictMode>
      <Footer />
    </React.StrictMode>
  );