React 19 Tutorial - 4 - Components
- React 컴포넌트는 자체 로직과 외형을 가진 UI의 재사용 가능한 조각입니다. 🧩
- 웹사이트는 헤더, 사이드바, 메인, 푸터 등 여러 컴포넌트와 이들을 감싸는 루트(App) 컴포넌트로 구성될 수 있습니다. 🌐
- 컴포넌트는 동일하거나 다른 데이터를 사용하여 여러 번 재사용할 수 있습니다. ♻️
- React 컴포넌트는 화면에 표시될 HTML(JSX)을 반환하는 일반 JavaScript 함수입니다. 💻
- 컴포넌트 이름은 반드시 대문자로 시작하는 파스칼 케이스(PascalCase)를 사용해야 합니다. 🅰️
- 컴포넌트는
<ComponentName />와 같은 형태로 다른 컴포넌트 내에 포함(중첩)될 수 있으며, 이는 부모-자식 관계를 형성합니다. 🏗️
- 소문자로 시작하는 컴포넌트 이름은 React가 HTML 요소로 오인하여 렌더링 오류를 발생시킵니다. ❌
- React는 여러 컴포넌트를 조합하여 복잡한 UI를 구성하는 방식으로 작동합니다. 🎨
- 컴포넌트는 UI의 일부를 설명하고, HTML을 반환하는 JS 함수이며, 서로 중첩될 수 있다는 것이 핵심입니다. ✅
- 향후에는 컴포넌트를 별도의 파일로 분리하여 관리하는 방법을 다룰 예정입니다. 📁