일반적 함수 선언과 화살표 함수선언 뭐가 다르지?

 

리액트 / 리액트-네이티브 개발을 하다보면

 

거의 무조건 컴포넌트마다 요소 핸들러 함수를 최소 1개씩은 작성하게 되는 것 같다.

 

처음에는 화살표함수를 썼는데, 이게 쓰다보니까 좀 시각적으로 조잡해보여서 

 

일반적인 함수 선언을 요즘 하고는 했다.

 

 

 

하지만 인터넷의 여러 코드를 보면, 화살표함수를 사용하는 경우가 많은데, 대체 어떤 이점이 있을까가 항상 궁금했다.

 

그래서 정리해보았다.

---

 

 

function 키워드를 사용한 함수 선언 방식은 일반적인 자바스크립트의 함수선언 방식이다.

 

함수 이름과 함수 본문을 중괄호로 둘러싸는 방식으로 함수를 선언하는데

 

함수 내에서 this 키워드를 사용하면 함수의 실행 context에 따라 다르게 동작할 수 있다.

 

그래서 클래스 기반 컴포넌트에서 이 부분 때문에 우리가 맨날 bind메소드를 써야하지 않는가.

 

 

반면에 화살표 함수는 함수를 선언하는 더 간결한 방법이다.

 

() => {} 과 같은 형태로 사용하는데, 뭐 인수가 하나일때는 괄호를 생략할 수 있고 바로 리턴하려면 또 중괄호가 생략가능

하다.

 

화살표 함수 내에서 this 키워드는 항상 해당 함수가 선언된 context를 가리키게 된다. 이게 매우 중요하다.

 

또한 화살표 함수는 자신의 this, arguments, super, new.target을 binding 하지 않는다.

 

 

 

따라서! 함수 내부에서 this 키워드를 사용하지 않거나

 

함수의 context를 변경할 필요가 없는 경우에는 화살표함수를 사용하는 것이 일반적으로 더 간결하고 직관적이다.