Input of one function comes from the output of another function.

👆 내가 찾을 수 있었던 함수 구성의 간단한 정의.

기능 프로그래밍에서 구성은 OOP에서 상속을 대신합니다.

구성 > 상속.

처음부터 구성을 사용하는 것이 좋습니다. 더 유연하고 강력하며 수행하기가 정말 쉽습니다.

작성 기능 만들기

ramda와 같은 많은 Javascript FP 라이브러리는 함수 구성을 만드는 데 도움이 되는 pipe() 및 compose()를 제공합니다. 그것들로 이동하기 전에 우리 자신의 예제 함수를 만들어 봅시다.

다음은 두 개의 함수를 인수로 취하는 compose 함수의 예입니다.

let compose = function(fn1, fn2) {
return fn2(fn1)
}

//or

let compose = (fn1,fn2) => fn2(fn1)

작곡 대 카레

Curry functions are always unary functions which take one argument per application.

Currying 함수는 구성과 매우 유사한 패턴으로 보이므로 종종 서로를 오인하게 됩니다.

카레 함수의 예

const sum = a => b => a + b
sum(3)(5) // 8

자바 스크립트에서 '카레'와 '구성'은 같은 개념입니까?

아니.

첫째, 커링은 여러 인수를 취하는 함수를 각각 하나의 인수를 받는 일련의 함수로 변환하는 것입니다.

여기에서 커리 함수가 한 번에 하나의 인수로 적용되는 뚜렷한 방식에 주목하십시오.

// not curried
const add = (x,y) => x + y;
add(2,3); // => 5

// curried
const add = x => y => x + y;
add(2)(3); // => 5

둘째, 함수 구성은 두 함수를 하나로 결합한 것으로, 적용 시 연결된 함수의 결과를 반환합니다.

const compose = f => g => x => f(g(x));

compose (x => x * 4) (x => x + 3) (2);
// (2 + 3) * 4
// => 20

The two concepts are closely related as they play well with one another. Generic function composition works with unary functions (functions that take one argument) and curried functions also only accept one argument (per application).

기능 구성

Function composition is a way of combining pure functions to build more complicated ones. Like the usual composition of functions in mathematics, the result of one function is passed as the argument of the next, and the result of last one is the result of the whole.

구성은 "결합"을 의미하는 멋진 용어입니다.

다시 말해서, 우리는 종종 여러 단계를 한 줄의 코드로 "결합"하거나 이를 포함하는 새 함수로 만들 수 있습니다.

예를 들어, 30도의 사인을 찾으려면(사인은 라디안을 사용함을 기억하십시오) 다음 두 항목을 단일 라인으로 "구성"할 수 있습니다. result = sin( degree_to_radians( 30 ) ). 이것은 우리가 f(g(x))를 자주 보는 수학에서와 동일합니다.

두 개 이상의 기능을 취하고 왼쪽에서 오른쪽으로 적용하는 compose 기능의 예

원하는 만큼 함수를 구성하는 함수를 작성할 수 있습니다. 즉, compose()는 한 함수의 출력이 다음 입력에 연결된 함수 파이프라인을 만듭니다.

const compose = (...fns) => (x) => fns.reduceRight((y, fn) => fn(y), x);

이 버전은 임의의 수의 함수를 사용하고 초기 값을 취하는 함수를 반환한 다음, fns에서 각 함수 f를 오른쪽에서 왼쪽으로 반복하기 위해 reduceRight()를 사용하고 이를 누적 값 y에 차례로 적용합니다. . 우리가 누산기로 누적하고 있는 것, 이 함수의 y는 compose()에 의해 반환된 함수의 반환 값입니다.

이제 다음과 같이 구성을 작성할 수 있습니다.

const g = n => n + 1;
const f = n => n * 2;

// replace `x => f(g(x))` with `compose(f, g)`

const h = compose(f, g);
h(20); //=> 42 

React의 구성

다른 버튼에 대한 컴포지션 만들기

const Button = props => {
  return <button>{props.text}</button>
}

const SubmitButton = () => {
  return <Button text="Submit" />
}

const LoginButton = () => {
  return <Button text="Login" />
}

메서드를 소품으로 전달

예를 들어 구성 요소는 클릭 이벤트 추적에 집중할 수 있으며 클릭 이벤트가 발생할 때 실제로 발생하는 일은 컨테이너 구성 요소에 달려 있습니다.

const Button = props => {
  return <button onClick={props.onClickHandler}>{props.text}</button>
}

const LoginButton = props => {
  return <Button text="Login" onClickHandler={props.onClickHandler} />
}

const Container = () => {
  const onClickHandler = () => {
    alert('clicked')
  }

  return <LoginButton onClickHandler={onClickHandler} />
}

어린이 사용

props.children  속성을 사용하면 다른 구성요소 내부에 구성요소를 삽입할 수 있습니다.

구성요소는 JSX에서 props.children를 출력해야 합니다.

const Sidebar = props => {
  return <aside>{props.children}</aside>
}

투명한 방식으로 더 많은 구성 요소를 포함합니다.

<Sidebar>
  <Link title="First link" />
  <Link title="Second link" />
</Sidebar>

App 구성요소가 데이터 구조를 노출하지 않는 방법에 주목하세요. TodoList  label  또는  status  속성이 있는지 전혀 모릅니다.

소위 렌더링 소품 패턴은 할 일을 렌더링하는 데 render 소품을 사용하지 않고 children 소품을 사용한다는 점을 제외하면 거의 동일합니다.

function TodoList({ todos, children }) {
  return (
    <section className='main-section'>
      <ul className='todo-list'>{
        todos.map((todo, i) => (
          <li key={ i }>{ children(todo) }</li>
        ))
      }</ul>
    </section>
  );
}

function App() {
  const todos = [
    { label: 'Write tests', status: 'done' },
    { label: 'Sent report', status: 'progress' },
    { label: 'Answer emails', status: 'done' }
  ];
  const isCompleted = todo => todo.status === 'done';
  return (
    <TodoList todos={ todos }>
      {
        todo => isCompleted(todo) ?
          <b>{ todo.label }</b> :
          todo.label
      }
    </TodoList>
  );
}