[React] 커링 함수 구현하기

 

 

 

---

 

 

◽ 커링(Currying)이란?

함수의 재사용성을 높이기 위해 함수 자체를 return하는 함수이다.

함수를 하나만 사용할 때는 필요한 모든 파라미터를 한 번에 넣어야하는데, 이 함수를 사용하면 함수를 분리할 수 있으므로 파라미터도 나눠 전달할 수 있다.

 

 

◽ 예제

import React from "react";
import './App.css';
import ChildComp from './ChildComp'

function App() {
  return (
   <div>
     <h1>React</h1>
     <ChildComp />
   </div>
  );
}

export default App;

import React, {Component} from "react";

class ChildComp extends Component {

  tryPlus(a) {
    // 200을 항상 고정값으로 보내주기 때문에 a만 달리 작성하면 된다.
    // 재사용성이 높다.
    return this.plusFunction(a)(200)
  }

  /*
  * 이 함수는 아래처럼 작성하는 것과 동일하다.
  * plusFunction = a => b => this.plusNumOrString(a, b)
  * */
  plusFunction(a) {
    return function(b) {
      return this.plusNum(a, b)
    }.bind(this)
  }

  plusNum(c, d) {
    return c + d
  }

  render() {
    return (
        <>
          <input onClick={e => alert(this.tryPlus(100))} />
        </>
    )
  }
}

export default ChildComp

 

 

 

---

 

출처

이정열, 초보자를 위한 리액트 200제 (정보문화사, 2021)