Component란?

Component is the base class for the React components defined as JavaScript classes. Class components are still supported by React, but we don’t recommend using them in new code.

컴포넌트는 JavaScript 클래스로 정의된 React 컴포넌트의 기본 클래스이다. 클래스 컴포넌트는 아직까지 리액트로부터 지원되지만, 우리는 새 코드에서 그 방법을 사용하는 것을 추천하지 않는다.

React 공식문서의 내용을 간단하게 해석하면, html 코드를 반환하는 javascript 함수이다.

클래스 컴포넌트는 공식문서에서도 권하지 않는 방법이므로 넘어가겠다.

---

함수형 컴포넌트

• App.jsx

import './App.css'

function Header1(){
  return(
    <header>
      <h1>Header</h1>
    </header>
  );
}

// 위 함수를 화살표 함수로 변경한 것임
// 기능적으로 같음
const Header2 = () => {
  return (
    <header>
      <h1>header</h1>
    </header>
  )
};

{/** 부모 컴포넌트 */}
function App() {
  return (
    <>
      {/** 자식 컴포넌트 */}
      <Header1/>
      <h1>안녕 리액트</h1>
    </>
  )
}

export default App

• main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <App />
)

---

컴포넌트를 사용할 때 주의할 점

컴포넌트의 첫 글자는 무조건 대문자를 사용해야 한다.
-> react 내부에서 첫 글자가 대문자가 아닌 컴포넌트는 컴포넌트로 인식하지 않는다.

이건 주의할점이라기보다 이러한 방식이 root적인 방식이다.
-> jsx 파일 하나당 하나의 component를 갖는다.
-> App.jsx가 최종적으로 root component이다. main.jsx를 보면 알겠지만, main.jsx에 반환되는 component는 App component 뿐이다.

---

함수형 컴포넌트 수정

• Header.jsx

function Header(){
    return(
      <header>
        <h1>Header</h1>
      </header>
    );
  }

  export default Header;

• App.jsx

import './App.css'
import Header from "./components/Header.jsx"

{/** 부모 컴포넌트 */}
function App() {
  return (
    <>
      {/** 자식 컴포넌트 */}
      <Header />
      <h1>안녕 리액트</h1>
    </>
  )
}

export default App

• main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <App />
)