JavaScript에서는 함수를 두 가지 방법으로 정의할 수 있다. 하나는 function 키워드를 이용한 전통적인 선언 방식이고, 다른 하나는 const를 이용한 화살표 함수(Arrow Function) 방식이다. 특히 React 프로젝트에서는 이 두 방식의 사용법이 조금 다르게 정리되고 있다.
이번 글에서는 두 방식의 차이와, 각각을 언제 사용하는 것이 좋은지 정리해본다.
function 함수 선언
function handleClick() {
console.log('clicked')
}- 함수 선언문(Function Declaration) 방식이다.
- 코드 상단으로 호이스팅(hoisting)된다. 즉, 선언 이전에 호출해도 에러가 발생하지 않는다.
- 독립적인
this컨텍스트를 가진다. - 디버깅 시 함수 이름이 명확하게 드러난다.
- 유틸리티 함수처럼 정적인 함수를 선언할 때 자연스럽다.
화살표 함수 선언
const handleClick = () => {
console.log('clicked')
}- 함수 표현식(Function Expression) + 화살표 함수(Arrow Function) 형태다.
- 변수에 함수가 할당되기 때문에 호이스팅되지 않는다. (선언 이후에만 호출 가능)
this를 바인딩하지 않고 부모 스코프의this를 그대로 상속한다.- 코드가 간결하고, 함수가 값처럼 다뤄진다.
- 특히 React 컴포넌트 내부에서는 화살표 함수가 표준처럼 쓰인다.
React 컴포넌트에서 화살표 함수를 선호하는 이유
-
코드 일관성과 간결함
화살표 함수는 짧고 명확해 읽기 쉽다.const를 사용해 재할당을 막는 것도 현대적인 스타일이다. -
this 문제를 방지
화살표 함수는 별도의this컨텍스트를 생성하지 않기 때문에 클래스 컴포넌트 시절부터 안정성을 위해 널리 사용되어 왔다. -
호이스팅 문제를 피함
선언된 이후에만 사용 가능하기 때문에 코드의 읽기 흐름이 명확해진다. -
팀 스타일 가이드 권장 사항
Airbnb, Google 등 주요 JavaScript 스타일 가이드에서도 가능한 모든 함수를const+ 화살표 함수로 선언할 것을 권장한다.
그렇다면 언제 function 키워드를 사용할까?
컴포넌트 내부가 아니라 파일 레벨에서 독립적인 유틸리티 함수를 정의할 때는 오히려 function 키워드로 선언하는 것이 더 자연스럽고 명확할 때가 많다.
- 독립적인 기능을 명확히 표현할 수 있다.
- 호이스팅을 이용해 파일 상단/하단 호출 순서를 자유롭게 구성할 수 있다.
- 디버깅 시 함수 이름이 확실히 남는다.
예를 들어 날짜 포맷터나 문자열 변환처럼 재사용되는 유틸성 함수는 function으로 선언하는 경우가 많다.
function formatDate(date) {
return date.toISOString().split('T')[0]
}결론
- React 컴포넌트 내부 이벤트 핸들러는
const+ 화살표 함수로 선언하는 것이 현대적이다. - 정적인 유틸리티 함수는
function키워드를 사용해 선언하는 것이 자연스럽다. - 각각의 상황에 맞게 선언 방식을 선택하면 코드의 일관성과 가독성을 모두 챙길 수 있다.
요약:
컴포넌트 안에서는 const + 화살표 함수,
컴포넌트 밖(파일 레벨 유틸리티 함수)에서는 function 키워드.
Hello!