함수와 함수의 호출, 고차함수

“함수의 호출은 리턴 값으로 대체해라!”

JS 예시

const onClick1 = () => () => {
  console.log("hello");
};

const onClick2 = () => {
  console.log("hello");
};

document.querySelector("#header").addEventListener("click", onClick1()); // 정답
document.querySelector("#header").addEventListener("click", onClick2()); // 오답

 

-onClick1이 정답인 이유는 onClick1() 자리에

document.querySelector("#header").addEventListener("click", () => {
  console.log("hello");
}); // 정답

이렇게 함수의 리턴값을 넣어보면 되기 때문이다.

 

-onClick2가 오답인 이유는

document.querySelector("#header").addEventListener("click", undefined); // 오답

함수의 리턴값이 undefined이기 때문이다.

React 예시

-틀린 코드

import React from "react";

// 이 코드는 틀림
export default function App() {
  const onClick = (e) => {
    console.log(e.target.value);
  };

  return <div onClick={onClick()}></div>;
}

이 코드는 틀렸다. 그 이유는 onClick() 부분에 리턴 값을 넣어보면 된다.

 

import React from "react";
import { useCallback } from "react";

export default function App() {
  const onClick = useCallback((e) => {
    console.log(e.target.value);
  }, []);
  return <div onClick={undefined}></div>;
}

이렇게 undefined가 되기 때문에 틀린 코드이다.

 

-맞는 코드이지만 안 좋은 경우

import React from "react";
import { useCallback } from "react";

export default function App() {
  const onClick = useCallback(
    () => (e) => {
      console.log(e.target.value);
    },
    []
  );
  return <div onClick={onClick()}></div>;
}

useCallback을 고차함수로 만드는 것은 좋지 않지만 이렇게 하면 맞는 코드가 될 수 있다.

 

import React from "react";
import { useCallback } from "react";

export default function App() {
  const onClick = useCallback(
    () => (e) => {
      console.log(e.target.value);
    },
    []
  );
  
  return (
    <div
      onClick={(e) => {
        console.log(e.target.value);
      }}
    ></div>
  );
}

리턴 값을 넣으면 이렇게 되기 때문이다.

 

-출처

https://www.youtube.com/watch?v=NS1cIsWlFGI&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=2

제로초님의 영상을 보고 정리한 글입니다.