03 컴포넌트 기초

프로젝트 구조

 

main.jsx

// node_modules의 모듈에서 react,react-dom 가져와서 임포트
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'

import './index.css'

import App from './App.jsx'

import App01 from './App01.jsx'

import App02 from './App02.jsx'

import App03 from './App03.jsx'

import App04 from './App04.jsx'

import App05 from './App05.jsx'



createRoot(document.getElementById('root')).render(

  <StrictMode>

    {/* <App /> */}

    {/* <App01/> */}

    {/* <App02/> */}

    {/* <App03/> */}

    {/* <App04/> */}

    <App05/>

  </StrictMode>,

)

 

 

1) 사용 예시

import App from './App.jsx'

 

createRoot(document.getElementById('root')).render( 의 {jsx}<StrictMode>태그에서
<App />으로 선언되어 실행된다

 

※createRoot(document.getElementById('root')).render( 실제 개발자 도구에서 html 구조를 보면 <root> 태그 안에서 값을 불러온다

 

 

2) import { StrictMode }와 import { createRoot }

// node_modules의 모듈에서 react,react-dom 가져와서 임포트
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'

 

[프로젝트 구조]에서 node_modules 폴더에

• react
• react-dom

라이브러리를 import하여 사용함

 

 

createRoot(document.getElementById('root')).render(

• createRoot는 React 18에서 사용하는 "React 앱을 웹 페이지에 렌더링"하는 코드

 

<StrictMode>

• 문제가 있거나 권장되지 않는 코드들에 대해 경고해주는 기능

 

 

3) 컴포넌트란?

리엑트의 컴포넌트란 웹페이지의 구성요소들을 재사용가능한 단위로 나눈 것

• 예시) main.jsx의 태그

App.jsx

import Child from './Child'
import { ClassComp, FunctionComp, ArrowFunctionComp } from './Components'

function Hello() {
  return <h1>Hello</h1>
}

function App() {

  return (
    <>
      <Hello />
      <h2>World</h2>
      <Child />

      <ClassComp /> // class 컴포넌트, 오늘날 사용X
      <FunctionComp /> // 함수형 컴포넌트
      <ArrowFunctionComp /> // 함수형 컴포넌트
    </>
  )
}

export default App

 

Child.jsx

function Child() {

  return (
    <p>
      This is a
      <br />
      child component
    </p>
  )
}

export default Child

 

Components.jsx

import React, { Component } from 'react';

// class 방식은 오늘날 잘 사용되지 않음
class ClassComp extends Component {
  render() {
    return <p>Class Comp</p>;
  }
}

// 성능 및 추상화, 재사용에 유리한 함수형 컴포넌트 방식을 주로 사용
function FunctionComp() {
  return <p>Function Comp</p>;
}

const ArrowFunctionComp = () => {
  return <p>Arrow Function Comp</p>;
};

export { ClassComp, FunctionComp, ArrowFunctionComp };