[React] Currying

커링(Currying) 기법은 인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법을 의미합니다.
인자가 n개인 함수를 n개로 분리하여 사용하게끔 만드는 기법입니다.

onChange로 생각해본다면 event.target.value로 지정한 아이디를 가져올 수 있지만 규모가 커진다면? 가독성도 안좋아지고 코드가 꼬일 가능성이 올라갑니다. 그래서 예시로 코드를 보자면

export default function() {
  const onClickGetId = (event) => {
  	console.log(event.target.id)
  }
  return (
  	<div onClick={onClickGetId} id="hoc"></div>
  )
}

이런식으로 currying 을 사용해 직접적으로? 가져온다면 좋은 방법입니다.
저는 state와 onChange의 코드줄을 줄이고 싶어서 아래처럼 활용을 했었는데요

  const [writeInput, setWriteInput] = useState({
    title: "",
    contents: "",
    writer: "",
    password: "",
    images: [imageUrl],
  });

  const onChangeWrite = (event: any) => {
    setWriteInput({
      ...writeInput,
      [event.target.id]: event.target.value,
    });
  };

  const onClickSubmit = async () => {
    try {
      const result = await createBoard({
        variables: { createBoardInput: { ...writeInput, images: [imageUrl] } },
      });
      console.log(result);

      void router.push(`/boards/${result.data?.createBoard._id}`);
    } catch (error) {
      alert(error.message);
    }
  };

Currying을 사용해서 하게된다면 어떤식으로 코드를 이어가야할지 아직 명확하게 생각이 자리가 잡히지 않아서 조금 더 공부를 해야할것 같습니다.

중복되는 코드를 적어놓고 인자에 필요한 데이터별로 넣어서 사용을 하면 좋을것 같습니다.

currying의 장점

• 함수의 인수(파라메터)를 부분적으로 적용할 수 있는 함수를 생성할 수 있다

• 함수안에 기능적으로 분리된 인수를 전달하게 되므로써 기능을 분리하여

  그 결과를 얻을 수 있다

  ( 좀더 자세히 : 기능별로 나누어서, 쪼개서 호출할 수 있다 )

• 임수의 부분(혹은 집합)을 전달하고 나머지 인수가 실행되는 함수를 리턴받을수 있다

• (개인적으로) 객체지향 언어에서 의례적으로 .(dot)을 참조하였던 방식대신

  연속적인 함수호출을 통하여 chaining 패턴같이 이어나갈수 있는 방식으로 느껴진다

  const order = store => menu => console.log(`{store}-${menu}`);
  order('중국집')('자장면')
  order('중국집')('짬뽕')

// 중복코드 해결