double arrow function

double arrow function(이중 에로우 함수)은 주로 함수형 컴포넌트 (functional component)에서 사용되며, 이벤트 핸들러 (event handler) 등에서 사용됩니다. 이중 화살표 함수는 ES6에서 도입된 화살표 함수 (arrow function)의 확장된 문법이다.

const handleClick = () => () => {
  console.log('이중 에로우 함수');
}

위 코드에서 handleClick 함수는 이중 화살표 함수로 작성되어 있으며 이중 화살표 함수는 함수를 반환하는 함수를 작성할 때 유용하게 사용
위의 코드에서 handleClick 함수는 함수를 반환하는 함수이며, 반환된 함수는 콘솔에 "이중 에로우 함수" 문자열을 출력합니다.

다른 예시로, 아래 코드는 onClick 이벤트 핸들러를 작성할 때 이중 화살표 함수를 사용한 예시입니다.

const MyButton = ({ text }) => {
  const handleClick = () => {
    console.log(text + ' 버튼이 클릭되었습니다.');
  };

  return (
    <button onClick={handleClick}>클릭</button>
  );
}

위 코드에서 handleClick 함수는 버튼을 클릭할 때마다 text와 함께 메시지를 출력합니다. handleClick 함수는 이중 화살표 함수로 작성되어 있으며, 이벤트 핸들러로 사용됩니다.
이중 화살표 함수를 사용하면 이벤트 핸들러에서 바로 원하는 로직을 작성할 수 있어서 코드를 간결하게 유지할 수 있습니다.

이중 에로우를 사용하는 이유

이중 에로우 함수 (double arrow function)는 함수를 반환하는 함수를 작성할 때 유용하게 사용됩니다.
이를 통해 코드의 가독성을 높이고, 중첩된 함수를 작성하는 것을 피할 수 있습니다.

예를 들어, 이벤트 핸들러 (event handler)에서 상태 값을 변경하고자 할 때, 일반적으로 다음과 같은 형태의 코드를 작성합니다.

const handleClick = () => {
  setCount(count + 1);
};

위 코드에서 setCount 함수는 상태를 변경하는 함수입니다. 이벤트 핸들러 내부에서 이 함수를 호출하면 상태를 변경할 수 있습니다.
하지만 이 코드를 작성할 때, 함수를 또 다른 함수에 넣어줘야 합니다. 이 때 이중 화살표 함수를 사용하면 다음과 같이 간단하게 작성할 수 있습니다.

const handleClick = () => () => {
  setCount(count + 1);
};

위 코드에서는 이중 화살표 함수를 사용하여 함수를 반환하는 함수를 작성하였습니다. 이벤트 핸들러에서 handleClick 함수를 호출하면 반환된 함수가 실행되어 상태가 변경됩니다. 이렇게 하면 중첩된 함수를 작성하지 않고도 코드를 간결하게 작성할 수 있습니다.

또한 이중 화살표 함수는 커링 (currying)이라는 함수형 프로그래밍의 개념을 쉽게 구현할 수 있도록 해줍니다. 커링은 여러 개의 인자를 받는 함수를 하나의 인자만 받는 함수의 체인으로 만드는 것을 의미합니다.
이중 화살표 함수를 사용하면 커링을 쉽게 구현할 수 있으며, 함수형 프로그래밍에서 많이 사용되는 기법 중 하나입니다.

아직 이해가 완전히 되지 않아서 더 공부해야할듯 함!