17. 컴포넌트 구조 분석(Component Tree)
1. 컴포넌트 구조란?
컴포넌트 구조(Component Tree)는 하나의 웹페이지를 여러 개의 작은 컴포넌트로 나누어 계층적으로 표현한 구조입니다.
React에서는 먼저 화면을 컴포넌트 단위로 분리한 후 개발을 시작합니다.
예를 들어 동부산CC 메인페이지는 하나의 파일이 아니라 여러 개의 컴포넌트가 모여 만들어집니다.
2. 동부산CC 컴포넌트 구조
App
│
├── Header
├── Hero
├── CourseSection
│ │
│ ├── CourseCard
│ └── CourseModal
│
├── Gallery
├── Reservation
├── Notice
└── Footer
이 구조를 Component Tree(컴포넌트 트리) 라고 합니다.
3. 부모와 자식
React 컴포넌트는
부모(Parent)
↓
자식(Child)
관계로 이루어집니다.
예)
CourseSection
↓
CourseCard
CourseSection은 부모
CourseCard는 자식입니다.
4. App.jsx
App은 가장 상위 컴포넌트입니다.
<App />
↓
Header
↓
Hero
↓
CourseSection
↓
Footer
App은 화면을 조립하는 역할입니다.
5. CourseSection
CourseSection은
코스 목록을 관리합니다.
CourseSection
↓
CourseCard
↓
CourseCard
↓
CourseCard
하나의 CourseCard를 여러 번 재사용합니다.
6. Props 전달
CourseSection
<CourseCard
course={course}
/>
CourseCard
function CourseCard({
course
}){
}
데이터는
부모
↓
자식
방향으로 전달됩니다.
7. State 위치
State는
필요한 곳에서만 관리합니다.
예)
CourseCard
↓
좋아요
좋아요는
CourseCard 안에서 관리합니다.
const [liked,setLiked]
=
useState(false);
8. State 공유
예약 정보처럼
여러 컴포넌트가 사용하는 데이터는
부모가 관리합니다.
Reservation
↓
Form
↓
Calendar
↓
Complete
Reservation이
State를 관리하고
자식에게 전달합니다.
9. 데이터 흐름
React는
항상
부모
↓
Props
↓
자식
방향으로 동작합니다.
반대로
자식
↓
부모
직접 전달하지 않습니다.
10. 함수 전달
자식에서 부모를 변경하려면
함수를 전달합니다.
부모
<CourseCard
onOpen={
setSelectedCourse
}
/>
자식
<button
onClick={()=>{
onOpen(course)
}}
>
버튼을 누르면
부모의 State가 변경됩니다.
11. 컴포넌트 재사용
CourseCard
하나만 만들어도
EAST
WEST
VALLEY
모두 출력할 수 있습니다.
courseData.map(...)
으로 자동 생성됩니다.
12. Component Tree 예제
App
↓
Header
↓
Menu
↓
MenuItem
MenuItem은
Menu 안에서만 사용됩니다.
13. 동부산CC 전체 구조
App
│
├── Header
│ └── Navigation
│
├── Hero
│
├── CourseSection
│ ├── CourseCard
│ └── CourseModal
│
├── Gallery
│
├── Reservation
│ ├── Form
│ └── Complete
│
├── Notice
└── Footer
14. 좋은 컴포넌트
✔ 하나의 역할만 수행
✔ 재사용 가능
✔ 코드가 짧음
✔ Props 사용
예)
Button
Card
Modal
Input
15. 좋지 않은 컴포넌트
Header
↓
예약
↓
공지
↓
회원관리
↓
게시판
↓
관리자
↓
로그인
↓
Footer
한 파일에
모든 기능을 넣으면
관리하기 어렵습니다.
16. React 실행 흐름
main.jsx
↓
App.jsx
↓
Header
↓
Hero
↓
CourseSection
↓
CourseCard
↓
Gallery
↓
Reservation
↓
Footer
React는 위 순서대로
컴포넌트를 실행합니다.
17. 실무 개발 순서
기획
↓
와이어프레임
↓
Component Tree 작성
↓
React 개발
↓
테스트
↓
배포
실무에서는 코딩보다 먼저 Component Tree를 설계하는 경우가 많습니다.
18. 컴포넌트 구조의 장점
코드 재사용
유지보수 편리
역할 분리
협업 효율 향상
기능 추가가 쉬움
예를 들어 CourseCard를 수정하면 모든 코스 카드에 동일하게 적용됩니다.
정리
컴포넌트 구조(Component Tree)는 React 애플리케이션을 여러 개의 작은 컴포넌트로 나누어 계층적으로 구성하는 방식입니다.
부모 컴포넌트는 Props를 통해 자식에게 데이터를 전달하고, 자식은 화면을 출력하거나 이벤트를 발생시켜 부모가 전달한 함수를 실행할 수 있습니다.
동부산CC 프로젝트에서는 App을 최상위 컴포넌트로 하여 Header, Hero, CourseSection, Gallery, Reservation, Notice, Footer를 구성하고, CourseSection 안에 CourseCard와 CourseModal을 배치하는 형태가 대표적인 컴포넌트 트리입니다.
React 프로젝트를 시작할 때는 코딩보다 먼저 컴포넌트 구조를 설계하는 습관을 들이면 프로젝트를 훨씬 체계적으로 개발할 수 있습니다.
1. 컴포넌트 구조란?
컴포넌트 구조(Component Tree)는 하나의 웹페이지를 여러 개의 작은 컴포넌트로 나누어 계층적으로 표현한 구조입니다.
React에서는 먼저 화면을 컴포넌트 단위로 분리한 후 개발을 시작합니다.
예를 들어 동부산CC 메인페이지는 하나의 파일이 아니라 여러 개의 컴포넌트가 모여 만들어집니다.
2. 동부산CC 컴포넌트 구조
App
│
├── Header
├── Hero
├── CourseSection
│ │
│ ├── CourseCard
│ └── CourseModal
│
├── Gallery
├── Reservation
├── Notice
└── Footer
이 구조를 Component Tree(컴포넌트 트리) 라고 합니다.
3. 부모와 자식
React 컴포넌트는
부모(Parent)
↓
자식(Child)
관계로 이루어집니다.
예)
CourseSection
↓
CourseCard
CourseSection은 부모
CourseCard는 자식입니다.
4. App.jsx
App은 가장 상위 컴포넌트입니다.
<App />
↓
Header
↓
Hero
↓
CourseSection
↓
Footer
App은 화면을 조립하는 역할입니다.
5. CourseSection
CourseSection은
코스 목록을 관리합니다.
CourseSection
↓
CourseCard
↓
CourseCard
↓
CourseCard
하나의 CourseCard를 여러 번 재사용합니다.
6. Props 전달
CourseSection
<CourseCard
course={course}
/>
CourseCard
function CourseCard({
course
}){
}
데이터는
부모
↓
자식
방향으로 전달됩니다.
7. State 위치
State는
필요한 곳에서만 관리합니다.
예)
CourseCard
↓
좋아요
좋아요는
CourseCard 안에서 관리합니다.
const [liked,setLiked]
=
useState(false);
8. State 공유
예약 정보처럼
여러 컴포넌트가 사용하는 데이터는
부모가 관리합니다.
Reservation
↓
Form
↓
Calendar
↓
Complete
Reservation이
State를 관리하고
자식에게 전달합니다.
9. 데이터 흐름
React는
항상
부모
↓
Props
↓
자식
방향으로 동작합니다.
반대로
자식
↓
부모
직접 전달하지 않습니다.
10. 함수 전달
자식에서 부모를 변경하려면
함수를 전달합니다.
부모
<CourseCard
onOpen={
setSelectedCourse
}
/>
자식
<button
onClick={()=>{
onOpen(course)
}}
>
버튼을 누르면
부모의 State가 변경됩니다.
11. 컴포넌트 재사용
CourseCard
하나만 만들어도
EAST
WEST
VALLEY
모두 출력할 수 있습니다.
courseData.map(...)
으로 자동 생성됩니다.
12. Component Tree 예제
App
↓
Header
↓
Menu
↓
MenuItem
MenuItem은
Menu 안에서만 사용됩니다.
13. 동부산CC 전체 구조
App
│
├── Header
│ └── Navigation
│
├── Hero
│
├── CourseSection
│ ├── CourseCard
│ └── CourseModal
│
├── Gallery
│
├── Reservation
│ ├── Form
│ └── Complete
│
├── Notice
└── Footer
14. 좋은 컴포넌트
✔ 하나의 역할만 수행
✔ 재사용 가능
✔ 코드가 짧음
✔ Props 사용
예)
Button
Card
Modal
Input
15. 좋지 않은 컴포넌트
Header
↓
예약
↓
공지
↓
회원관리
↓
게시판
↓
관리자
↓
로그인
↓
Footer
한 파일에
모든 기능을 넣으면
관리하기 어렵습니다.
16. React 실행 흐름
main.jsx
↓
App.jsx
↓
Header
↓
Hero
↓
CourseSection
↓
CourseCard
↓
Gallery
↓
Reservation
↓
Footer
React는 위 순서대로
컴포넌트를 실행합니다.
17. 실무 개발 순서
기획
↓
와이어프레임
↓
Component Tree 작성
↓
React 개발
↓
테스트
↓
배포
실무에서는 코딩보다 먼저 Component Tree를 설계하는 경우가 많습니다.
18. 컴포넌트 구조의 장점
코드 재사용
유지보수 편리
역할 분리
협업 효율 향상
기능 추가가 쉬움
예를 들어 CourseCard를 수정하면 모든 코스 카드에 동일하게 적용됩니다.
정리
컴포넌트 구조(Component Tree)는 React 애플리케이션을 여러 개의 작은 컴포넌트로 나누어 계층적으로 구성하는 방식입니다.
부모 컴포넌트는 Props를 통해 자식에게 데이터를 전달하고, 자식은 화면을 출력하거나 이벤트를 발생시켜 부모가 전달한 함수를 실행할 수 있습니다.
동부산CC 프로젝트에서는 App을 최상위 컴포넌트로 하여 Header, Hero, CourseSection, Gallery, Reservation, Notice, Footer를 구성하고, CourseSection 안에 CourseCard와 CourseModal을 배치하는 형태가 대표적인 컴포넌트 트리입니다.
React 프로젝트를 시작할 때는 코딩보다 먼저 컴포넌트 구조를 설계하는 습관을 들이면 프로젝트를 훨씬 체계적으로 개발할 수 있습니다.
#17. 컴포넌트 구조 분석(Component Tree)