[React] 함수형 컴포넌트 생성 방식

코딩을 하다 보니 리액트 컴포넌트를 생성할 때 사용하는 스타일이 크게 두 가지로 나뉘는 것 같다. 크게 중요하지는 않지만 이유가 궁금해서 지피티에게 물어보았다.

1. 화살표 함수 스타일

const Hello = () => {
  return <div>hi</div>;
}

이 스타일은 화살표 함수를 사용하여 컴포넌트를 정의한다. 화살표 함수는 익명 함수를 간결하게 정의하는 방법 중 하나이며, 주로 ES6 이후의 JavaScript에서 선호되는 방식이다.

2. 함수 선언식 스타일

function Hello() {
  return <div>hi</div>
}

이 스타일은 일반적인 함수 선언식을 사용하여 컴포넌트를 정의한다. 이전에 사용되던 방식으로, 함수 이름을 사용하여 정의한다.

이 두 가지 방식은 동일한 결과를 생성하지만 차이점은 아래와 같다.

문법적 차이

• 화살표 하무는 간결하고 짧게 작성될 수 있다.
• 함수 선언식은 보다 전통적인 JavaScript 문법을 사용한다.

this의 차이

• 화살표 함수에서 this는 함수가 정의된 시점에서 상위 스코프의 this를 캡처한다.
• 함수 선언식에서 this는 호출되었을 때 동적으로 바인딩된다.

따라서 주로 선호되는 스타일은 화살표 함수 스타일이며, 특히 함수 내부에서 this를 사용하지 않는 경우에 더욱 유용하다.