[React] React에서 어떨 때 화살표 함수를 사용하는걸까 ?

JavaScript의 ES6에서는 이전과는 많이 다른 형태의 함수 선언 방법이 제시되었다.

그 방법은 바로 화살표 함수 방법이다.

 

 

 

화살표 함수(Arrow Function)

화살표 함수 표현식을 사용하여 함수를 나타내는 방법은 아래와 같다.

const 함수이름 = (인자)=>{
    함수 내용
};

 

딱 봐도 함수가 비교적 간단해 보이지 않는가 ? 

보는 것처럼, 화살표 함수는 일반 함수에 비해 생략된 기능을 가진다.

 

• 화살표 함수는 this를 가지지 않는다.
• 화살표 함수는 arguments를 가지지 않는다.
• 화살표 함수는 생성자 함수로 사용할 수 없다.

 

---

화살표 함수는 this를 가지지 않는다.

 

기본적인 함수 선언에서 this는 동적으로 바인딩된다.

• 객체의 메서드에서 this
• 일반 함수 this
• 생성자 함수에서 this

객체 메서드에서 this

객체 메서드에서는 this가 해당 호출 주체를 가리킨다.

 

const obj = {
  name: 'Alice',
  sayName: function() {
    console.log(this.name);
  }
};
obj.sayName(); // this는 obj를 참조 → 'Alice'

 

 

 

일반 함수에서 this

일반 함수에서는 기본적으로 전역 객체(window)를 가리킨다.

function show() {
  console.log(this);
}
show(); // 브라우저: window, strict mode: undefined

 

 

생성자 함수에서의 this

new로 생성한 생성자 함수에서는 this가 새롭게 생성된 인스턴스를 가리킨다.

function Person(name) {
  this.name = name;
}
const person = new Person('Bob');
console.log(person.name); // 'Bob'

 

하지만 화살표 함수에서는 다른 함수 선언 방식들과 다르게 상위 스코프의 this를 그대로 사용하게 된다!

const obj = {
  name: 'Carol',
  sayName: () => {
    console.log(this.name);
  }
};
obj.sayName(); // this는 상위 스코프를 참조하므로, 예상치 못한 결과가 나올 수 있음

 

화살표 함수는 기본적으로 this를 가지지 않고, 상위 스코프의 this를 받아 사용하므로, 위 코드에서 sayName이 정의된 위치의 상위 스코프인 전역 객체를 참조하게 된다.

 

결과적으로 전역 객체에는 name이 존재하지 않기 때문에 undefined가 출력된다.

---

화살표 함수는 arguments를 가지지 않는다.

 

arguments 객체는 함수가 호출될 때 전달하는 인자들을 모두 가지고 있는 유사배열 객체이다.

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
console.log(sum(1, 2, 3, 4)); // 10

 

위 코드에서 보이는 것처럼 sum 함수에 매개변수를 지정하지 않았음에도 arguments에는 sum 함수 호출 시에 전달한 값이 존재한다.

따라서 위처럼 arguments를 사용할 수 있게 되는 것이다.

 

이러한 arguments가 화살표 함수에서는 지원되지 않는다.

arguments와 비슷하게 사용하려면, rest 파라미터를 사용하여 비슷하게 사용할 수 있다.

const arrowFunc = (...args) => {
  console.log(args);
};
arrowFunc(1, 2, 3); // [1, 2, 3]

 

---

화살표 함수는 생성자 함수로 사용될 수 없다.

 

내부 설계 측면에서 생성자 함수로 사용할 수 있으려면 [[Construct]] 내부 메서드가 있어야 하는데, 화살표 함수는 [[Construct]] 내부 메서드가 존재하지 않는다.

또한 인스턴스들이 공유할 수 있는 프로퍼티와 메서드를 정의하기 위한 prototype 프로퍼티가 존재하지 않는다.

 

이에 대한 자세한 내용은 다음 포스팅에서 따로 설명하겠다.

 

---

 

이처럼 화살표 함수(Arrow Function)을 정리하면

• 일반 함수 선언보다 간단하게 필수 내용만 가지고 있음
• 렉시컬 this
• arguments 존재 X
• 생성자 함수로 사용 X

 

이러한 특징은 결론적으로 생성자 함수를 생성자 함수가 아닌, 함수 중에서도 간략하게 잠시 사용하는 함수에 많이 사용하게 만든다.

 

React에서는 이런 화살표 함수를 아래와 같은 상황에 사용한다.

• 함수형 컴포넌트 정의
• 콜백 함수

 

함수형 컴포넌트 정의 

화살표 함수를 사용하면 컴포넌트를 훨씬 간결하게 정의할 수 있다.

또한 컴포넌트에서는 this 혹은 argument를 사용할 필요가 없기 때문에, 함수형 컴포넌트에서는 화살표 함수를 많이 사용한다.

(arguments가 필요하면 rest 파라미터로 사용 가능하기 때문)

// 화살표 함수를 사용한 함수형 컴포넌트 정의
const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;

// 일반 함수를 사용한 함수형 컴포넌트 정의
function Greeting({name}){
	return <h1>Hello, {name}!</h1>;
}

 

위 두 코드들을 보면 화살표 함수를 사용한 것이 훨씬 더 간결하다는 것을 알 수 있다.

 

---

콜백 함수

콜백 함수처럼 간결하게 딱 작성해야 하는 부분에서도 화살표 함수를 많이 사용한다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      {/* onClick 이벤트에 화살표 함수 콜백을 전달 */}
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default Counter;

 

onClick과 같이 이벤트에 동작을 넣을 때 많이 사용한다!

 

 

 

정리하자면, React에서 화살표 함수는 간결하게 작성해야 하는 부분에 사용하게 된다.

주로 함수형 컴포넌트, 콜백 함수에 많이 사용한다.