함수 컴포넌트는 어떻게 정의하고 사용하나요?

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

이름이 대문자로 시작하는 JavaScript 함수를 정의해 props를 입력받고 JSX 등 렌더 가능한 UI 값을 반환하도록 작성합니다. 상태 관리나 외부 동기화가 필요할 때는 함수 최상위에서 useState, useEffect 같은 Hook을 호출해 연결합니다. 이때 렌더 본문은 같은 입력에 같은 UI를 반환하는 순수 계산으로 유지하고, 네트워크 요청이나 DOM 조작 같은 부작용은 이벤트 핸들러나 Effect에 분리해 배치합니다.

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

1. JSX 변환기는 소문자 이름을 HTML 호스트 태그로, 대문자 이름을 사용자 정의 컴포넌트로 구별합니다.
2. 컴포넌트 경계를 잘 나누면 독립적인 상태 수명과 재사용 가능한 인터페이스를 명확히 유지할 수 있습니다.

면접에서 자주 하는 실수

부모 컴포넌트 함수 내부에서 자식 컴포넌트 함수를 중첩 정의하면 매 렌더마다 새로운 타입으로 인식되어 자식의 상태와 DOM이 매번 초기화됩니다.