기능적 구성 및 lodash

함수형 프로그래밍에서 함수형 구성은 일련의 함수를 함께 연결하는 것입니다.
예를 들어:

// code to trim a string
let trim = str => str.trim();
// code to convert string into lowercase
let lowerCase = str => str.toLowerCase();
//code tp wrap a string inside a div
let wrapper = str => <div>${str}</div>;
console.log(wrapper(lowerCase(trim(" HELLO WORLD! "))))

여기에 "HELLO WORLD! ", 하고 싶다
ㅏ. 문자열 자르기(양쪽 공백 제거)

비. 문자열을 소문자로 변환

씨. div 안에 문자열을 감쌉니다.
위의 예에서 함수를 호출하고 함수의 출력을 다른 매개변수로 전달했습니다.
여기서 함수가 증가할수록 코드를 읽는 복잡성이 증가하고 디버깅도 어려워집니다.

이 문제를 해결하기 위해 lodash를 사용할 수 있습니다.

프로젝트에서 lodash를 사용하는 단계:

ㅏ. lodash 패키지 설치

npm install lodash

비. lodash 참조 포함

include {compose, pipe } from "lodash/fp"
let trim = str => str.trim();
let lowerCase = str => str.toLowerCase();
let wrapper = str => `<div>${str}</div>`;
const newString = pipe(trim, lowerCase, wrapper);
console.log(newString("HEllo WORLD"))

위의 예에서 파이프를 사용했는데 여기서 주어진 입력에서 실행해야 하는 일련의 함수를 제공할 수 있습니다. (왼쪽에서 오른쪽으로 실행)

씨. 함수의 순서를 오른쪽에서 왼쪽으로 지정하려면 compose를 사용할 수 있습니다.

include {compose, pipe } from "lodash/fp"
let trim = str => str.trim();
let lowerCase = str => str.toLowerCase();
let wrapper = str => `<div>${str}</div>`;
const newString = compose(wrapper, lowercase, trim);
console.log(newString("HEllo WORLD"))