05. Component(컴포넌트)
1. 컴포넌트(Component)란?
컴포넌트(Component)는 화면(UI)을 작은 단위로 나누어 만든 독립적인 부품입니다.
React에서는 하나의 큰 페이지를 만드는 것이 아니라 여러 개의 컴포넌트를 조합하여 하나의 화면을 완성합니다.
예를 들어 동부산CC 메인페이지는 다음과 같이 구성할 수 있습니다.
동부산CC 메인페이지
│
├── Header
├── Hero
├── CourseSection
├── Gallery
├── Reservation
├── Notice
└── Footer
각각이 하나의 컴포넌트입니다.
2. 왜 컴포넌트를 사용할까?
기존 HTML 방식에서는 하나의 HTML 파일에 모든 내용을 작성합니다.
<header></header>
<section></section>
<section></section>
<section></section>
<footer></footer>
페이지가 커질수록 코드가 길어지고 수정이 어려워집니다.
React에서는 각각을 분리합니다.
<Header />
<Hero />
<CourseSection />
<Gallery />
<Footer />
장점
코드 재사용
유지보수 쉬움
가독성 향상
협업하기 좋음
3. 함수형 컴포넌트
React에서는 대부분 함수형 컴포넌트를 사용합니다.
예제
function Header(){
return(
<header>
<h1>동부산CC</h1>
</header>
)
}
export default Header;
함수 이름이 컴포넌트 이름이 됩니다.
4. 컴포넌트 이름 규칙
컴포넌트 이름은 반드시 대문자로 시작합니다.
올바른 예
Header
Hero
Footer
Reservation
잘못된 예
header
hero
footer
React는 소문자로 시작하면 HTML 태그로 인식합니다.
5. 컴포넌트 불러오기(import)
Header.jsx
function Header(){
return(
<header>
Header
</header>
)
}
export default Header;
App.jsx
import Header from "./components/Header";
이렇게 다른 파일의 컴포넌트를 사용할 수 있습니다.
6. export
컴포넌트를 다른 파일에서 사용하려면 export 해야 합니다.
export default Header;
그러면
import Header from "./components/Header";
처럼 사용할 수 있습니다.
7. App.jsx
App.jsx는 모든 컴포넌트를 조립하는 역할입니다.
import Header from "./components/Header";
import Hero from "./components/Hero";
import Footer from "./components/Footer";
function App(){
return(
<>
<Header />
<Hero />
<Footer />
</>
)
}
export default App;
실행 순서는
App
↓
Header
↓
Hero
↓
Footer
입니다.
8. 컴포넌트 재사용
컴포넌트는 여러 번 사용할 수 있습니다.
예제
<CourseCard />
<CourseCard />
<CourseCard />
실제 프로젝트에서는
EAST COURSE
WEST COURSE
VALLEY COURSE
모두 같은 CourseCard 컴포넌트를 사용합니다.
9. 컴포넌트 안에 컴포넌트
React에서는 컴포넌트 안에 다른 컴포넌트를 넣을 수 있습니다.
예제
App
↓
CourseSection
↓
CourseCard
↓
LikeButton
하나의 큰 화면을 여러 개의 작은 부품으로 나누는 방식입니다.
10. 동부산CC 프로젝트 구조
src
components
Header.jsx
Hero.jsx
CourseSection.jsx
CourseCard.jsx
CourseModal.jsx
Gallery.jsx
Reservation.jsx
Notice.jsx
Footer.jsx
App.jsx
import Header from "./components/Header";
import Hero from "./components/Hero";
import CourseSection from "./components/CourseSection";
import Gallery from "./components/Gallery";
import Reservation from "./components/Reservation";
import Notice from "./components/Notice";
import Footer from "./components/Footer";
function App(){
return(
<>
<Header />
<Hero />
<CourseSection />
<Gallery />
<Reservation />
<Notice />
<Footer />
</>
)
}
export default App;
11. 컴포넌트 실행 흐름
main.jsx
↓
App.jsx
↓
Header
↓
Hero
↓
CourseSection
↓
CourseCard
↓
Gallery
↓
Reservation
↓
Footer
React는 위 순서대로 컴포넌트를 실행하여 하나의 화면을 만듭니다.
12. 컴포넌트를 잘 만드는 방법
하나의 컴포넌트는 하나의 역할만 담당하는 것이 좋습니다.
좋은 예
Header
메뉴만 담당
Hero
메인 비주얼만 담당
CourseCard
코스 카드만 담당
좋지 않은 예
Header 안에
예약
공지
갤러리
로그인
회원관리
모든 기능 작성
컴포넌트가 너무 커지면 수정과 재사용이 어려워집니다.
정리
React는 화면을 여러 개의 작은 컴포넌트로 나누어 개발하는 방식입니다.
컴포넌트는 함수형으로 작성하며, export와 import를 통해 다른 파일에서 사용할 수 있습니다.
동부산CC 프로젝트에서도 Header, Hero, CourseSection, Gallery, Reservation, Notice, Footer처럼 화면을 역할별로 나누어 개발하면 코드의 재사용성과 유지보수성이 크게 향상됩니다.
컴포넌트를 잘 설계하는 것은 React 개발의 핵심이며, 이후 배우게 될 Props, State, 이벤트 처리 역시 모두 컴포넌트를 중심으로 이루어집니다.
1. 컴포넌트(Component)란?
컴포넌트(Component)는 화면(UI)을 작은 단위로 나누어 만든 독립적인 부품입니다.
React에서는 하나의 큰 페이지를 만드는 것이 아니라 여러 개의 컴포넌트를 조합하여 하나의 화면을 완성합니다.
예를 들어 동부산CC 메인페이지는 다음과 같이 구성할 수 있습니다.
동부산CC 메인페이지
│
├── Header
├── Hero
├── CourseSection
├── Gallery
├── Reservation
├── Notice
└── Footer
각각이 하나의 컴포넌트입니다.
2. 왜 컴포넌트를 사용할까?
기존 HTML 방식에서는 하나의 HTML 파일에 모든 내용을 작성합니다.
<header></header>
<section></section>
<section></section>
<section></section>
<footer></footer>
페이지가 커질수록 코드가 길어지고 수정이 어려워집니다.
React에서는 각각을 분리합니다.
<Header />
<Hero />
<CourseSection />
<Gallery />
<Footer />
장점
코드 재사용
유지보수 쉬움
가독성 향상
협업하기 좋음
3. 함수형 컴포넌트
React에서는 대부분 함수형 컴포넌트를 사용합니다.
예제
function Header(){
return(
<header>
<h1>동부산CC</h1>
</header>
)
}
export default Header;
함수 이름이 컴포넌트 이름이 됩니다.
4. 컴포넌트 이름 규칙
컴포넌트 이름은 반드시 대문자로 시작합니다.
올바른 예
Header
Hero
Footer
Reservation
잘못된 예
header
hero
footer
React는 소문자로 시작하면 HTML 태그로 인식합니다.
5. 컴포넌트 불러오기(import)
Header.jsx
function Header(){
return(
<header>
Header
</header>
)
}
export default Header;
App.jsx
import Header from "./components/Header";
이렇게 다른 파일의 컴포넌트를 사용할 수 있습니다.
6. export
컴포넌트를 다른 파일에서 사용하려면 export 해야 합니다.
export default Header;
그러면
import Header from "./components/Header";
처럼 사용할 수 있습니다.
7. App.jsx
App.jsx는 모든 컴포넌트를 조립하는 역할입니다.
import Header from "./components/Header";
import Hero from "./components/Hero";
import Footer from "./components/Footer";
function App(){
return(
<>
<Header />
<Hero />
<Footer />
</>
)
}
export default App;
실행 순서는
App
↓
Header
↓
Hero
↓
Footer
입니다.
8. 컴포넌트 재사용
컴포넌트는 여러 번 사용할 수 있습니다.
예제
<CourseCard />
<CourseCard />
<CourseCard />
실제 프로젝트에서는
EAST COURSE
WEST COURSE
VALLEY COURSE
모두 같은 CourseCard 컴포넌트를 사용합니다.
9. 컴포넌트 안에 컴포넌트
React에서는 컴포넌트 안에 다른 컴포넌트를 넣을 수 있습니다.
예제
App
↓
CourseSection
↓
CourseCard
↓
LikeButton
하나의 큰 화면을 여러 개의 작은 부품으로 나누는 방식입니다.
10. 동부산CC 프로젝트 구조
src
components
Header.jsx
Hero.jsx
CourseSection.jsx
CourseCard.jsx
CourseModal.jsx
Gallery.jsx
Reservation.jsx
Notice.jsx
Footer.jsx
App.jsx
import Header from "./components/Header";
import Hero from "./components/Hero";
import CourseSection from "./components/CourseSection";
import Gallery from "./components/Gallery";
import Reservation from "./components/Reservation";
import Notice from "./components/Notice";
import Footer from "./components/Footer";
function App(){
return(
<>
<Header />
<Hero />
<CourseSection />
<Gallery />
<Reservation />
<Notice />
<Footer />
</>
)
}
export default App;
11. 컴포넌트 실행 흐름
main.jsx
↓
App.jsx
↓
Header
↓
Hero
↓
CourseSection
↓
CourseCard
↓
Gallery
↓
Reservation
↓
Footer
React는 위 순서대로 컴포넌트를 실행하여 하나의 화면을 만듭니다.
12. 컴포넌트를 잘 만드는 방법
하나의 컴포넌트는 하나의 역할만 담당하는 것이 좋습니다.
좋은 예
Header
메뉴만 담당
Hero
메인 비주얼만 담당
CourseCard
코스 카드만 담당
좋지 않은 예
Header 안에
예약
공지
갤러리
로그인
회원관리
모든 기능 작성
컴포넌트가 너무 커지면 수정과 재사용이 어려워집니다.
정리
React는 화면을 여러 개의 작은 컴포넌트로 나누어 개발하는 방식입니다.
컴포넌트는 함수형으로 작성하며, export와 import를 통해 다른 파일에서 사용할 수 있습니다.
동부산CC 프로젝트에서도 Header, Hero, CourseSection, Gallery, Reservation, Notice, Footer처럼 화면을 역할별로 나누어 개발하면 코드의 재사용성과 유지보수성이 크게 향상됩니다.
컴포넌트를 잘 설계하는 것은 React 개발의 핵심이며, 이후 배우게 될 Props, State, 이벤트 처리 역시 모두 컴포넌트를 중심으로 이루어집니다.
#05. Component(컴포넌트)