6주차에 쓰는 5주차 블로그..^^

1. Currying 이란?

Currying이란 여러 개의 인자를 받는 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법으로, React에서 많이 사용된다.

매개변수를 하나만 사용하는 HOF라고 생각하면 될까..?

2. Currying 살펴보기

1) 기존 함수 활용

기존 함수는 a, b 매개변수 두 개를 사용하여 함수 aaa를 실행해주었다.

function aaa (a, b) {
	console.log( a+ " " + b)
}

aaa("hello", "world!") // hello world!

2) Currying 활용

Curring을 활용할 경우 매개변수 두 개를 두 개의 함수로 쪼개서 사용하고 있다. 일부 인자를 고정시키는 새로운 함수 BBB를 만들어줬으며, AAA 함수에 'hello'값을 고정해주고 CCC 함수에서 인자를 변경하여 사용할 수 있다.

(1) 일반 함수형

function AAA (a) {
  return function BBB (b) {
    console.log(a + " " + b)
  }
}

const CCC = AAA("hello")
ccc("world!")  // hello world!

(2) 화살표 함수형

const AAA = (a) => (b) => {
    console.log(a + " " + b)
  }
}

const CCC = AAA("hello")
ccc("world!")  // hello world!

3. Currying 함수 활용 이유

커링을 활용함으로써 일부 인자에 같은 값을 반복적으로 사용할 때 반복되는 인자를 고정시킴으로써 중복을 최소화할 수 있다.

aaa("hello", "world")
aaa("hello", "철수")
aaa("hello", "영희")

const aaa = (a) => (b) => {
  console.log(a + " " + b)
}

const ccc = aaa("hello")
ccc("world!") // hello world!
ccc("철수") // hello 철수
ccc("영희") // hello 영희

1) 기존 함수 활용 예시

버튼 클릭 시 해당 버튼의 id를 타겟하여 콘솔로 가져오는 상황을 예시로 들어보자!
나같은 코린이는 아직까지 겪어보지 못한 문제지만, 대형 프로젝트를 여러 명이 동시에 진행할 경우 id값이 중복되는 경우가 발생하게 되어 예상하지 못한 문제가 생길 수 있다.

export defult function () {
	const onClickId = (event) => {
      console.log(event.taget.id)
    }
    
    return (
      <button onClick={onClickId} id="ID">아이디 가져오기</button>
	)
}

2) Currying 함수 활용 예시

export default function () {
  const onClickId = (id) => (event) => {
    console.log(id, event.target.id)
  }
  
  const getId = onClickId("ID")
  
  return (
    <button onClick={getId}>아이디 가져오기</button>

<참조 : https://velog.io/@uiop5487/React-Currying>