React 엘리먼트와 컴포넌트는 어떻게 다른가요?

이렇게 답해 보세요 (핵심 답변)

컴포넌트는 props를 받아 UI를 반환하는 재사용 가능한 함수나 클래스 정의이고, 엘리먼트는 그 컴포넌트나 태그를 어떤 props로 화면에 그릴지 기술한 불변 객체입니다. 예를 들어 Greeting 함수 자체는 컴포넌트이고, JSX로 작성한 <Greeting name="수진" />의 평가 결과는 엘리먼트입니다. 같은 컴포넌트 정의라도 트리의 서로 다른 위치에 엘리먼트로 배치되면 각각 독립된 상태를 가집니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. UI를 계산하는 템플릿 정의(컴포넌트)와 특정 렌더 시점의 화면 설명 값(엘리먼트)을 구분하면 합성 패턴을 이해하기 쉽습니다.
2. 엘리먼트를 만드는 것은 메모리상의 설명 객체를 생성하는 것일 뿐, 즉시 실제 DOM 노드를 생성하는 명령이 아닙니다.

면접에서 자주 하는 실수

컴포넌트 함수를 일반 함수처럼 직접 호출해 사용하려 하면 Hook 규칙과 트리 정체성 관리가 깨질 수 있으므로 주의해야 합니다.