리액트 컴포넌트

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

• 이런것처럼 HTML 을 리턴하는 함수를 하나하나 컴포넌트라고 한다. → 함수로 만들었으니 함수 컴포넌트
• class 방식의 컴포넌트도 있다.
• 컴포넌트는 첫글자를 꼭 대문자로 써줘야한다.

function App() {
  return (
    <>
        <Header/>
        <Main/>
        <Footer/>
    </>
  )
}

• 이런식으로 App 컴포넌트가 최상위 부모(Root 컴포넌트)이고 그 아래 자식 컴포넌트를 끼워넣어줘야한다.

JSX - UI 표현하기

export function Main() {
    const number = 10;

    return (
        <main>
            <h1>My Main Component</h1>
            <h2>{number + 10}</h2>
        </main>
    );
}