1. 컴포넌트(Component)란 무엇인가?

1-1. 컴포넌트의 정의

👉 화면을 구성하는 독립적인 UI 단위입니다.

React 애플리케이션은 컴포넌트들의 조합으로 만들어집니다.

페이지 = 컴포넌트들의 트리 구조

1-2. 컴포넌트 기반 개발의 장점

장점 설명
재사용성 같은 UI를 여러 곳에서 사용
유지보수성 수정 범위 최소화
가독성 UI 구조가 명확
테스트 용이 단위 테스트 가능

📌 실무 React 개발의 핵심은 “컴포넌트 분리 능력”

2. 함수형 컴포넌트(Function Component)

2-1. 기본 구조

React 컴포넌트는 함수로 작성합니다.

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

export default Header;

또는 화살표 함수:

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

2-2. 컴포넌트 규칙

  1. 컴포넌트 이름은 반드시 대문자로 시작