[React] 4. 컴포넌트

Feb 11, 2026

Contents

1. 헤더 컴포넌트 만들어보기 2. 헤더 컴포넌트 임포트하기 3. 컴포넌트 모듈화 1. components 경로 생성 2. 모듈만들기 3. App 모듈에서 import 하기

1. 헤더 컴포넌트 만들어보기


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

⇒ 이러한 형태를 함수 컴퍼넌트라 부른다.

다음과 같이 람다식으로 컴퍼넌트를 만들 수도 있다.


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

✅ 컴퍼넌트를 만들 때 이름의 첫 글자는 무조건 대문자로 시작한다

리액트 앱에서는 컴퍼넌트를 생성할 때 컴포넌트 명의 첫 글자로 대문자를 사용하지 않고 소문자나 숫자 등을 사용한다면 이를 컴포넌트로 인식해주지 않는다.

⇒ import 되지도 않음!

2. 헤더 컴포넌트 임포트하기


function App() {
  return (
    <>
      <Header />
      <h1>안녕 리액트</h1>
    </>
  );
}

⇒ 이렇게 다른 컴포넌트의 return문 내에 삽입되는 컴포넌트는 자식컴포넌트라 부른다.

3. 컴포넌트 모듈화

💡

만들어진 컴포넌트를 모듈화하여 관리하기 위해서는 몇 가지 과정이 필요하다

1. components 경로 생성

src 바로 아래에 components라는 디렉토리를 생성한다.

2. 모듈만들기

만들어둔 모듈의 코드를 넣고 export default 모듈명 으로 내보내기 해준다.


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

export default Header;

3. App 모듈에서 import 하기

import 문을 작성해서 삽입할 모듈의 이름과 경로를 작성한다.


import "./App.css";
import Header from "./components/Header";

function App() {
  return (
    <>
      <Header />
      <h1>안녕 리액트</h1>
    </>
  );
}

export default App;

이때 굳이 경로를 수기로 작성하지 않아도 삽입하고자 하는 컴포넌트 명을 기입하면 자동으로 경로를 보여주는데 이를 선택하고 엔터를 하면 자동으로 import된다.

⚠️ ES모듈 시스템인데 왜 inport문에 확장자명을 기입하지 않아도 잘 작동될까?

vite로 앱을 만들 때는 확장자명을 굳이 기입하지 않아도 내부적으로 알아서 파일을 찾을 수 있도록 설정이 되어있기 때문이다.

만일 vite로 앱을 만들지 않은 경우라면 오류가 발생할 수 있으니 이 부분 잘 알고 넘어가자