3. 구조

일단은 최상위 컴포넌트

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <Main />

    <ClassComp></ClassComp>

  </React.StrictMode>

);

얘는 저렇게 root에 직접 연결해서 render, #root에다 전해주는 애임.

여기다 필요한 거 불러다 쓰면 됨.

 

그 다음, 컴포넌트는 2가지 스타일이 있음.

함수형

import './main.css';

function Main(){

  return (

    <div className='App'>

      <h1>Hello React V18</h1>

    </div>

  )

}

export default Main;

 

 

css import 하는 건 일단 무시하고,

저렇게 

function 컴포넌트명(){
    return(
    	요소
    )
}

export default 내보낼것

return 안에다 요소를 쓰면 됨.

내보낼 것은 지금같은 경우 저 컴포넌트명이라고 한 함수 내보내면 됨.

 

 

 

다음 클래스 형

import { Component } from "react";

class ClassComp extends Component {

  render() {

    return (

      <>

        <h1>클래스형 컴포넌트</h1>

      </>

    );

  }

}

export default ClassComp;

 

 

import { Component } from "react"

리액트에서 Component 가져와야 한다.

그 다음 그거 상속받아서 클래스 만들고,

render(){
	return(
    	요소
    );
}

하면 된다.

 

이거를 이제 불러와서 쓰면 됨.

index.js에서 불러올 경우

import Main from './Main'

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <Main />

  </React.StrictMode>

);

저렇게 Main불러와서 쓰면 됨.

.js는 안붙여도 되는 듯.