원글: https://kentcdodds.com/blog/function-forms — Kent C. Dodds
저의 평소 리액트 컴포넌트를 작성하는 방식은 이와 같습니다:
이 코드에서 화살표 함수와 일반 함수를 섞어 사용하는 것을 찾으셨을 겁니다. 이 부분에 있어서 사람들에게서 얼마나 많은 질문을 받는지 아시면 놀라실 것입니다. 저는 어떠한 주제에 관해서 질문을 많이 받으면 블로그에 그에 대해 작성합니다, 자 이제 시작 해볼까요.
(이 글을 모두에게 더 명확하게 만들기 위해) 이 글에서 얘기해 볼 4가지 타입의 함수를 나열하겠습니다:
- 함수 선언식(function declarations)
- 함수 표현식(function expressions)
- 화살표 함수(Arrow functions)
- 객체 매소드(Object methods)
각 함수의 형태가 조금씩 다른 의미를 가지고 있습니다만, 이 글에서 모두 설명하는 수고는 하지 않겠습니다.
저는 화살표 함수가 생기기 전에 자바스크립트로 코딩을 하였습니다. 그래서 저는 함수 선언식과 함수 표현식 이 익숙해져 있었습니다. 그리고 언제 어떤 함수를 사용해야 하는지 저만의 “느슨한" 규칙들을 만들었습니다. 그건 이와 같습니다:
- 저는 콜백함수를 사용할 때는 함수 표현식 을 사용합니다.
- 저는 객체의 속성으로 사용할 때는 함수 표현식 을 사용합니다.
- 저는 위 2가지 상황이 아닌 경우에는 함수 선언식을 사용합니다.
함수 선언식을 선호하는 이유는 이렇습니다. 함수 표현식 에는 없지만 선언식 에는 이 기능이 있기 때문이죠: 함수 선언의 호이스팅
이 에러는 우리가 가장 좋아하는Uncaught TypeError: undefined is not a function 입니다 (요즘은 자바스크립트 엔진이 이런 요소에 발전을 해서Uncaught TypeError: thisThrowsAnError is not a function 가 되겠군요)
하지만 기억하세요. 이 규칙들은 “느슨”하기 때문에 저도 항상 따르지 않고, 또 ESLint 같은 도구들을 통해서 강제되어야 한다고 생각하지도 않습니다.
화살표 함수와 객체 메소드 방법들이 생기고 나서 저의 느슨한 규칙들 에 작은 변화를 주었습니다:
- 저는 콜백 함수를 사용할 때는 화살표 함수를 사용합니다.
- 저는 함수가 여러줄 이거나, 또는 아무것도 반환하고 싶지 않을 때 객체 메소드를 사용합니다. 이 외에는 화살표 함수를 사용합니다.
- 저는 암묵적 반환(implicit return)기능이나 렉시컬 스코프(lexical scope)기능(‘this’가 제 생각대로 동작하게 해주는)을 이용하고 싶으면 화살표 함수를 사용합니다.
- 그 외로는 함수 선언식을 사용합니다.
그리고 가끔씩 한줄짜리 무언가를 반환하는 함수에는 함수 선언식을 사용합니다. 왜냐하면 디버거(debugger)문이나 console.log를 사용하기 더 쉽기 때문이죠.
이것들은 꼭 지켜야하는 엄중한 규칙들이 아닙니다. 다양한 형태의 함수를 사용해야 하는 이유는 이보다 더 많습니다. 사실 콜백 함수에는 함수 표현식 을 사용하는 것이 틀림없이 더 좋을지도 모릅니다, 왜냐하면 함수에 이름을 지정해줌으로 디버깅에 도움이 될지도 모르니까요 (저도 가끔씩 이러한 이유로 해야겠습니다).
아무튼, 흥미로운 주제였기를 바랍니다!
