리액트에서 컴포넌트를 정의할 때 const를 사용할 필요는 없다

ES6 이후로 var와 함께 거의 금기처럼 여겨지는 키워드가 있으니 그 것이 바로 function 이었다. 그럴만한게 당시는 객체지향의 시대였다보니 ES6에 class 키워드도 추가 되고, this에 익숙했다. 콜백함수를 이용할 땐 인자로 자신이 속한 객체를 보내주는 것이 아니라 this를 사용하는게 일반적이었기 때문이다. 리액트 또한 상태관리를 사용하는 경우 class로 컴포넌트를 정의해야했다.

다만 완성되지 않은 class 문법은 사람들을 혼란스럽게 했고, this라는 키워드도 혼란이 있었기 때문에, this는 작동하지 못하게 Arrow Function이 스탠다드가 되었던 것이다.

물론 모두가 Arrow Function을 사용할 때 한 유명한 자바스크립트 개발자는 함수와 변수의 정의를 혼용하지 말라며 일관성 있게 함수는 function을 사용하는 방법을 권장하는 글도 있었다.

하지만 새로운 기능이라 너무 힙했었고 나도 수년간 const에 ArrowFunction으로 리액트 컴포넌트를 정의하였다.

지금은 function을 사용한다

지금은 function을 이용한다. 리액트를 사용하면 가장 많이 접할 react, nextjs의 공식문서 예제들은 전부 function을 이용하여 컴포넌트를 정의한다.

나도 함수는 function으로 정의하는게 일관성 있다고 생각하여 리액트 외에도 함수는 전부 function 키워드를 사용한다.

const를 옹호하는 사람들

함수 정의를 const로 하자는 사람들의 의견을 모아보았다.

규칙

function 키워드를 사용해서 불필요한 작업을 할 가능성을 열어두지 말고 순수함수인지 생성자 함수인지도 구분을 하자는 것이다. https://www.youtube.com/watch?v=LPEwb5plEoU

큰 회사에서는 다양한 사람이 있기 때문에 아마 서로 다른 다양한 문법을 사용하고 있기 때문에 그러한 걱정이 생긴 것 같다. 비교적 최근에 개발을 시작한 개발자라면 사실 function가지고 뭘 하는 사람이 없어서 그걸 걱정해본 적은 없다. 또한 자바스크립트에서는 변수와 함수의 컨벤션이 같은데 애초에 식별자로 구분할 수 없는 경우도 흔하다.

this의 경우 자바를 주로 다루는 백엔드 개발자가 프론트도 작업하는 경우 외에는 보기 어렵다.

호이스팅이 걱정된다

jQuery 시절에는 호이스팅이 재앙 그 자체였다. 모든게 전역으로 선언이 되기에 함수 이름을 겹치지 않게 하기 위해 큰 노력이 필요했다. 그러나 webpack의 등장 이후엔 모듈 단위로 개발을 하다보니 이름이 겹치는 문제는 잘 생기지 않게 되었고 있다고해도 쉽게 찾아 해결할 수 있게 되었다.

호이스팅을 제대로 이해하지 못하는 일부 개발자들은 성능 문제가 있다는 주장도 있다. 하지만 const도 호이스팅이 된다는 점을 잊어선 안된다. 다만 TDZ라는 개념이 추가될 뿐이다..

function foo() {
  // bar 변수는 밑에 있지만 사용할 수 있다.
  console.log(bar); // baz
}

const bar = 'baz';
foo();

실제로는 자바스크립트에 호이스팅이라는 작업은 존재하지 않는다. https://medium.com/nmc-techblog/what-is-hoisting-in-javascript-bf73980d9dac 단지 쉽게 설명하기 위해 만들어진 추상적인 단어이다.

성능 문제가 있다?

https://stackoverflow.com/questions/44030645/are-arrow-functions-faster-more-performant-lighter-than-ordinary-standalone-f V8 엔진 개발자에 따르면 차이가 없다.

Arrow Function 표현식은 바인딩이나 프로토타입도 없으므로 성능에서 분명 우세할 수 있다라는 말은 납득이 간다.(하지만 차이가 없다고 봐도 무방할 정도)

취향차이

결국 둘은 취향차이로 갈릴 뿐이다. 다만 글로벌 대기업의 표준을 보면 리액트 함수는 function으로 정의하는 경향이 있다.