더북(TheBook)

함수 표현식

const App = function App() {
  return (
    <>
      <h1>Hello, Function Component!</h1>
    </>
  );
};
export default App;

화살표 함수

const App = () => {
  return (
    <>
      <h1>Hello, Function Component!</h1>
    </>
  );
};
export default App;

세 가지 방식은 모두 동일하게 동작합니다. 어떤 방식으로 컴포넌트를 작성하더라도 리액트는 정상적으로 컴포넌트로 인식하고 렌더링합니다. 하지만 함수 선언문 방식을 가장 많이 사용합니다. 코드의 가독성이 좋고, 함수 이름이 명확하게 보이기 때문입니다. 이 책에서도 함수 선언문 방식을 기준으로 컴포넌트를 설명합니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.