3.2.2 함수형 컴포넌트

함수형 컴포넌트(functional component)는 함수를 사용해 컴포넌트를 작성하는 방식입니다. 기본 구조는 매우 간단합니다. function 키워드로 함수를 선언한 뒤, return 문 안에 JSX를 사용해 화면에 표시할 UI 구조를 정의합니다. 함수형 컴포넌트가 실행되면 return 문에 작성한 JSX가 반환됩니다. 리액트는 반환된 JSX를 HTML로 변환해 웹 브라우저에 렌더링합니다. 즉, JSX로 실제 화면(UI)이 어떻게 보여야 할지 구성하는 것입니다.

export default function [컴포넌트_이름]() {
  return (...); // JSX 반환
}

함수형 컴포넌트의 이름은 파스칼 케이스로 작성해야 합니다. 이는 리액트가 해당 함수를 일반 HTML 태그가 아닌 컴포넌트로 인식하는 데 필요합니다.

TIP   파스칼 케이스(PascalCase)란 각 단어의 첫 글자를 대문자로 쓰고, 공백이나 구분자 없이 이어 붙이는 표기법입니다.

함수형 컴포넌트를 직접 만들어 보겠습니다. App 컴포넌트에 있는 기존 코드를 모두 삭제하고 다음과 같이 새로운 코드를 작성합니다.