React

화살표 함수

Lulung 2024. 12. 18. 22:43

화살표 함수는 JavaScript에서 제공하는 간결한 함수 정의 방법이다. 문법이 간단하고, this의 동작 방식이 다르다는 특징이 있다.

 

기본 문법

const 함수명 = (매개변수1, 매개변수2) => {
  // 함수 본문
};

예시

const add = (a, b) => {
  return a + b;
};

 

간략화된 문법 (단일 반환값일 경우)

화살표 함수는 단일 반환값일 경우 {}와 return을 생략할 수 있다. 이 경우 값을 바로 반환한다.

const add = (a, b) => a + b;

 

매개변수가 하나일 경우 괄호 생략 가능

매개변수가 하나만 있을 경우 ()를 생략할 수 있다.

const double = num => num * 2;

 

this의 동작 방식

일반 함수와 달리 화살표 함수는 자신만의 this를 가지지 않으며 상위 스코프의 this를 참조한다.

예시 : 일반 함수의 this

const obj = {
  value: 10,
  regularFunction: function() {
    console.log(this.value); // 'this'는 obj를 참조
  }
};

obj.regularFunction(); // 10

일반 함수에서 this는 함수를 호출한 객체를 참조한다. 이 예시에서는 obj.regularFunction()이 호출되므로 this는 obj를 가리킨다.

예시 : 화살표 함수의 this

const obj = {
  value: 10,
  arrowFunction: () => {
    console.log(this.value); // 'this'는 상위 스코프를 참조
  }
};

obj.arrowFunction(); // undefined

화살표 함수에서는 상위 스코프의 this를 참조한다. 위 코드에서 화살표 함수 arrowFunction의 this는 전역 객체(브라우저에서는 window)를 참조하기 때문에 window.value를 출력한다.

따라서 this가 필요한 상황에서 화살표 함수를 주위 깊게 사용해야 한다. this가 함수 정의 시점의 상위 스코프를 참조하므로 이벤트 핸들러나 콜백에서 유용하다.

 

'React' 카테고리의 다른 글

useState란?  (0) 2024.12.19
useEffect란?  (0) 2024.12.19
DOM  (0) 2024.12.19
컴포넌트의 생애 주기  (2) 2024.12.18
React 기초 : 컴포넌트  (2) 2024.12.18