props로 전달되는 함수 가독성 높이기

상황

부모 컴포넌트에서 자식컴포넌트에게 props로 함수를 넘기는 상황이다.

  const goUrl = (path: string) => {
    router.push(path);
  };

이 goUrl함수를

<Child
  ...
  goUrl={() => {
   goUrl(option.path);
  }
/>

Child라는 컴포넌트에 props로 넘기는 상황이다.

문제 해결

goUrl함수는 호출되면 어떠한 값을 리턴하지 않고 단순히 함수블럭 내에서 router.push(path)만을 실행시킨다.
즉, goUrl은 인자를 받아서 무언갈 리턴하지않고 함수블럭내에서 인자에 대해서 어떠한 동작을 행하는 함수이다.
이때 이러한 함수를 props로 자식 컴포넌트에게 전달할때 가독성을 좋게하는 방법이있다.

  const goUrl = (path: string) => () => {
    router.push(path);
  };

goUrl이라는 함수를 함수를 리턴하는 함수로 바꾸는것이다.
무언가를 리턴하는 함수로 바꾼다면 props로 goUrl이라는 함수를 props로 전달할때 가독성을 더좋게 만들수있다.

그럼 결과를 보면!

<Child
  ...
  goUrl={goUrl(option.path)}
/>

실제적으로 전달하려는 목적이 변하였는가? - NO
전달하려는 목적 - router.push(path) 를 동작하게 하는 함수를 보내고싶었다.

전달되는 props는 동일하나 props에 해당 함수를 정의할 때 가독성이 훨씬 높아진걸 볼수가 있다.

• 함수를 props로 전달할때 가독성 높이는 방법으론 함수를 리턴하는 방법이 있다.