React 공식 홈페이지 따라하기
React 공식 홈페이지 따라하기 - 컴포넌트 선언
vitamin3000
2024. 11. 18. 21:45
학습 내용
- 컴포넌트란?
- React에서 컴포넌트의 역할
- 컴포넌트 작성 방법
컴포넌트 : UI 구성요소
HTML, CSS, JS로 동작하는 모든 것이 UI의 기반이 된다.
React를 사용하면 앱의 재사용 가능한 UI요소인 사용자 정의 "컴포넌트"로 결합 할 수 있다.
예시 코드..)
<PageLayout>
<NavigationHeader>
<SearchBar />
<Link to="/docs">Docs</Link>
</NavigationHeader>
<Sidebar />
<PageContent>
<TableOfContents />
<DocumentationText />
</PageContent>
</PageLayout>
컴포넌트 정의하기
export default function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3Am.jpg"
alt="Katherine Johnson"
/>
)
}
컴포넌트를 빌드하는 방법
1. 컴포넌트 내보내기(export)
2. 함수 정의하기(function () {})
3. 마크업 추가하기
return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
// return 키워드와 한 줄에 있지 않다면...
return (
<div>
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</div>
);
컴포넌트 사용 예시
function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3As.jpg"
alt="Katherine Johnson"
/>
);
}
export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}
주의사항 !!
컴포넌트는 다른 컴포넌트를 렌더링할 수 있지만, 정의를 중첩해서는 안 된다.
export default function Gallery() {
// 🔴 절대 컴포넌트 안에 다른 컴포넌트를 정의하면 안 됩니다!
function Profile() {
// ...
}
// ...
}
export default function Gallery() {
// ...
}
// ✅ 최상위 레벨에서 컴포넌트를 선언합니다
function Profile() {
// ...
}