리액트 커링(React Currying)

 

❗️고차함수 

 - 인자값으로 함수를 받거나, 리턴값으로 함수를 반환하는 함수(컴포넌트를 인수로 하는 함수)

 - 일반 컴포넌트를 감싸고 추가 기능을 제공한다. 

 

const EnhancedComponent = higherOrderComponent(OriginalComponent);

 고차 함수에 원래 컴포넌트를 넣으면 기능이 추가된 컴포넌트를 반환한다. 

 

❗️HOC

 - High Order Component

 - "필요한 구조만 상속받아 사용할 수 없을까?" 

 - 컴포넌트를 반환할 수 있다. 

 - 이름은 with로 시작해야 한다.

 

 

❗️커링(currying)

 - 논리학자 하스켈 브룩스 커링(Haskell Brooks Curry) 이름에서 따옴(아마도)

 - 거의 모든 함수형 언어가 공유하는 특징

 - 다인자 함수의 변수 쪼개기(다변수 함수를 일변수 함수 여러개로 쪼개는 것)

 - 중복된 코드를 줄여준다.

 - 실행 시점을 뒤로 미룰 수 있다.

 

function multiply(x)(y) {
	return x * y
}

function multiply(x) {
	return function(y) {
     return x * y
   }
}

// 인자를 두 개 받던 함수가 인자 하나씩을 받는 함수 두 개로 쪼개졌다. 

// 화살표 함수로 나타내면
let multiply = x => y => x * y;

let multipleByDouble = multiply(2);
// 2를 인자로 받는 multiply를 multipleByDouble로 지정한다. 
// 그럼 multipleByDouble은 인자를 받아 그것에 2를 곱하여 돌려주는 함수가 된다.

multiply(2)(10); // 2 * 10 = 20
multipleByDouble(10); // 2 * 10 = 20

multiply(2)(10); multiply에 x로 2를 넣은 함수가 반환되고, 그것(y)에 10을 넣는다.

 

 인자를 두 개 받던 함수가 인자 하나씩을 받는 함수 두 개로 쪼개졌다. 

그리고 multiply(2)를 multipleByDouble이란 함수로 만든다면, 하나의 인자인 x가 2로 고정되고, y만 인자로 받는 함수가 된 것을 알 수 있다. 즉, 일부 인자에 같은 값을 넣어서 사용할 때, 그 값을 고정하는 것을 말한다. 

 인자는 반복 사용 빈도가 높을 수록 상단에, 낮을 수록 하단에 배치한다. 

 

 

function addAdj(adj, name) {
  return adj + " " + name;
}

function addAdj2(adj) {
  return function(name) {
    return adj +" " + name;
  }
}

addAdj("귀여운", "만두"); // '귀여운 만두'

let addCute = addAdj2("귀여운");

addCute("만두"); // '귀여운 만두'

const addAdj3 = (adj) => (name) => adj + " " + name;

addAdj3("귀여운")("만두"); // '귀여운 만두'

const addAdj4 = (name) => addAdj3("귀여운")(name);

addAdj4("만두"); // '귀여운 만두'
addAdj4("만두콩");  // '귀여운 만두콩'

// 혼자 이것저것 해본 것...

 

참고 : https://dev.to/cesareferrari/higher-order-components-and-currying-in-react-fep 

 

 

처음엔 뭔가 했는데 만두 쓰면서 하니까 재밌었다..🥹