컴포넌트 (Component)

 

 

React 컴포넌트 (Component)

 

 

 

컴포넌트 (Component) 

: html 태그들을 반환하는 함수

• 보통 함수 이름을 따서 부름
  (ex. function App( ... ) 👉 App 컴포넌트
• 컴포넌트 함수명은 반드시 첫 글자가 대문자여야 함

 

함수 표현식

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

 

 

화살표 함수

const Header = () => {
  return (
    <header>
      <h1>Header</h1>
    </header>
  )
}

 

 

 

 

 

 

컴포넌트 계층 구조

• 컴포넌트는 계층 구조로 나타난다.

 

루트(root) 컴포넌트

: 모든 컴포넌트의 조상 역할을 하는 컴포넌트 

• 원하는 대로 변경 가능하지만 보통은 App을 루트 컴포넌트로 둠

 

 

부모 컴포넌트

: 다른 컴포넌트의 호출을 품은 컴포넌트

 

 

 

자식 컴포넌트

: 다른 컴포넌트의 return문 내부에 포함되는 컴포넌트

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

 

 

 

 

생성한 컴포넌트는 App 컴포넌트의 자식 컴포넌트로 호출해야 화면에 보인다.

이유 👉 main.jsx에서 App 컴포넌트를 root로 랜더링하도록 했기 때문

 

 

 

 

 

 

 

컴포넌트 파일화 하기

• 보통 모듈화를 위해 컴포넌트들을 각각 파일화한다.

 

1. 파일에 컴포넌트 작성하기

• 확장자 .jsx

 

2. 값 내보내기

export default 컴포넌트명;

 

3. 값 불러오기

import 컴포넌트명 from './파일명.jsx'

 

4. 부모 컴포넌트 안에서 호출하기

<컴포넌트명/>

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

function App() {

  return (
    <>
    <Header/>
    </>
  )
}

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

export default Header;

 

 

 

---

 

 

출처

한입 크기로 잘라먹는 리액트

 

컴포넌트 제대로 만들기