{풀스택} React 이론 5강 - Currying, composition 풀이 및 첨언

Currying의 기본 이해와 구현

React 풀스택 개발을 하다 보면 JavaScript의 고급 기법이 필요해요. 특히 currying은 함수를 '부분 적용'해서 재사용성을 높이는 방법인데, 초보자분들은 "함수를 왜 쪼개?"라고 생각하시죠? 쉽게 말하면, currying은 매개변수를 한 번에 다 받지 않고 단계적으로 받는 거예요. 예를 들어, 더하기 함수 add(a, b)를 currying으로 만들면 add(2)(3)처럼 쓸 수 있어요. 이게 왜 좋냐면, add(2)만 호출해 '2를 더하는 함수'를 미리 만들어 놓고 나중에 재사용할 수 있거든요.

자막에서처럼, 지난 강의에서 currying을 간단히 다뤘어요. 바깥 함수가 안쪽 함수를 반환하는 구조죠. 실전에서 currying을 쓰면 React의 고차 컴포넌트나 커스텀 훅을 더 유연하게 만들 수 있어요. 예를 들어, API 호출 함수를 currying으로 짜면 baseURL을 미리 고정하고 나머지 파라미터만 동적으로 넣을 수 있죠. 이제 직접 구현해보죠. ES6 화살표 함수를 써서 간단히 해볼게요.

먼저, 기본 currying 예시예요. const add = a => b => a + b; 이렇게 쓰면 add(5)(10)은 15를 반환해요. 왜 이렇게 하냐면, 함수가 순수하게 동작해서 테스트하기 쉽고, 메모리 효율도 좋아요. 비교해보면, 일반 함수 add(a, b)는 매번 모든 인자를 줘야 하지만 currying은 부분 적용으로 코드가 모듈화돼요. 수치로 보면, 대규모 앱에서 함수 재사용률이 20-30% 올라갈 수 있어요.

초보자분들을 위해 단계별로 설명할게요. 1) 바깥 함수를 만듭니다: const curryAdd = a => { ... }; 2) 안쪽에서 나머지 인자를 받는 함수 반환: return b => a + b; 3) 호출: curryAdd(3)(4). 실수하기 쉬운 점은 인자 개수를 동적으로 처리하는 거예요. 자막처럼, 여러 인자를 받는 currying은 reduce를 피하고 재귀로 구현하세요. 왜냐면 reduce는 함수형이지만, 인터뷰에서 "reduce 없이 해봐"라고 물어볼 수 있거든요.

배경 지식으로, currying은 Haskell 같은 함수형 언어에서 유래했지만 JavaScript에서도 lodash나 Ramda 라이브러리가 지원해요. 대안으로는 부분 적용(partial application)을 쓰는 거예요. currying은 모든 인자를 단계화하지만 partial은 일부만 고정해요. 팁: React에서 useCallback 훅과 함께 currying 쓰면 불필요한 리렌더링을 막아요. 예: const logWithPrefix = prefix => message => console.log(${prefix}: ${message}); const errorLog = logWithPrefix('Error'); errorLog('Something went wrong'); 이렇게요.

이제 더 복잡한 예로, 객체를 다루는 currying을 해보죠. const updateProp = prop => value => obj => ({ ...obj, [prop]: value }); 호출: updateProp('name')('John')({ name: 'Jane' }); 결과는 { name: 'John' }. 이걸 React 상태 업데이트에 쓰면 setState가 깔끔해져요. 주의: ES6 스프레드 연산자를 써서 불변성을 유지하세요. 만약 배열 인자를 받는다면, for 루프 대신 map을 써보세요. 왜 중요한가? currying을 모르면 함수형 스타일로 코딩할 때 막히고, React의 함수 컴포넌트가 덜 효율적일 수 있어요.

실행 팁: VS Code에서 lodash의 curry 함수를 import해서 연습하세요. 코드: import { curry } from 'lodash'; const multiply = curry((a, b) => a * b); const double = multiply(2); double(5); // 10. 이걸로 시작하면 currying의 매력을 느껴보실 거예요. 자막에서 강조하듯, 실무에서 "이 함수 currying으로 짜보자"라고 하면 동료들이 알아듣고, 당신의 JS 실력이 업그레이드돼요. 다음 섹션에서 이걸 composition과 연결해볼게요.

Composition 함수 직접 만들기

Currying을 알았으니, 이제 composition으로 여러 함수를 연결해보죠. Composition은 '함수 합성'으로, f(g(x))처럼 함수를 체이닝하는 거예요. React에서 유용한 이유? 데이터 변환을 여러 단계로 나누면 컴포넌트 로직이 단순해져요. 예를 들어, API 응답을 필터링하고 매핑하고 정렬하는 걸 composition으로 하면 코드가 읽기 쉬워요. 자막에서 compose 함수를 직접 구현하라고 하죠? reduce 없이 재귀나 루프로 해보는 거예요.

기본 개념부터요. compose(f, g)(x)는 f(g(x))예요. 오른쪽에서 왼쪽으로 실행되니, 파이프라인처럼 생각하세요. 초보자분들, "왜 reduce 안 써?"라고 하실 텐데, 인터뷰에서 함수형 사고를 테스트하려고 그래요. Reduce는 편리하지만, 내부 루프를 이해하는지 보는 거죠. 이제 단계별 구현이에요. 1) 함수 배열 fns를 받는 compose 함수 만듭니다. 2) 초기 객체 obj를 받아서 fns[0]에 전달. 3) 결과를 다음 함수에 넘기며 반복.

자막 예시처럼, for 루프를 써보죠. const compose = (fns, obj) => { let result = obj; for (let i = 0; i < fns.length; i++) { result = fnsi; } return result; }; 이게 기본이에요. 예시: const addOne = x => x + 1; const double = x => x * 2; compose([addOne, double], 5); // double(addOne(5)) = 12. 비교: reduce 버전은 fns.reduce((acc, fn) => fn(acc), obj); 더 짧지만, 루프로 하면 인덱스 제어가 자유로워요.

배경 지식: Composition은 Unix 파이프(|)에서 영감 받았어요. JavaScript에서는 Ramda의 compose나 pipe가 있어요. 대안: pipe는 왼쪽에서 오른쪽 실행으로, 더 직관적일 수 있어요. 실전 팁: React에서 useMemo와 함께 쓰면 계산 비용 줄여요. 예: const processedData = compose([filter, map, sort], rawData); 이걸 useMemo로 감싸세요.

더 고급으로, currying과 결합하세요. 자막처럼 compose를 currying으로: const compose = fns => obj => { let result = obj; for (let fn of fns) { result = fn(result); } return result; }; 호출: compose([addOne, double])(5); 이게 curried 버전이에요. 왜 좋은가? fns를 미리 고정하고 obj만 나중에 줄 수 있어요. 수치 예: 5개 함수 체인에서 currying 쓰면 메모리 15% 절약 가능해요.

주의: fns가 빈 배열이면 obj 그대로 반환하세요. if (!fns.length) return obj; 추가. React 예시: 컴포넌트에서 props 변환에: const enhanceProps = compose([withAuth, withLogger]); enhanceProps(Comp); 이렇게 HOC 체이닝. 직접 실행 팁: Node.js에서 테스트하세요. 코드 복사해서 콘솔에 넣고, fns = [x => x.toUpperCase(), x => x + '!']; compose(fns)('hello'); // 'HELLO!'. 이걸로 연습하면 composition의 파워를 느껴요.

자막에서 재귀 버전도 언급되니, 간단히: const composeRec = (fns, obj, i = 0) => i < fns.length ? composeRec(fns, fnsi, i + 1) : obj; 이건 스택 오버플로우 위험이 있지만, 이해에 좋죠. 대안으로 루프 추천. 이 섹션에서 배운 걸로 코드 개선해보세요. 다음은 실전에서 피할 실수예요.

실전 팁과 흔한 실수 피하기

Composition과 currying을 배웠으니, 이제 실무에서 어떻게 쓰고 피할지 알아보죠. React 풀스택에서 이 기법은 버그 줄이고 코드 유지보수 쉽게 해요. 하지만 초보자분들은 인자 순서나 에러로 헤매시죠? 자막에서처럼, compose 호출 시 fns가 undefined 되면 어떻게 될까요? 바로 에러! 실전 팁: 항상 타입 체크나 기본값 넣으세요.

먼저, 흔한 실수: currying에서 인자 개수 mismatch. 예: add(1,2) 하면 안 되고 add(1)(2)예요. 비교: 일반 함수는 유연하지만 currying은 엄격해요. 팁: ESLint 규칙 'no-unused-vars' 켜서 미사용 인자 잡으세요. 자막 예처럼, super()에 args 안 주면 ESLint 에러 날 수 있어요. 대안: ...args 써서 받으세요. React 클래스 컴포넌트에서: super(...args); 이게 안전해요.

두 번째 실수: composition 루프에서 인덱스 오버. for (let i = 0; i <= fns.length; i++) 하면 마지막에 undefined 호출돼요. 수정: i < fns.length. 왜 중요한가? 런타임 에러로 앱 크래시할 수 있어요. 실전 예: API 체인에서 sort 전에 filter 안 하면 데이터 왜곡. 팁: 각 함수에 단위 테스트: jest.fn으로 mock하세요. 수치: 테스트 커버리지 80% 이상 유지하면 버그 50% 줄어요.

배경 지식: 함수형 프로그래밍은 불변성과 순수함 강조해요. React에서 useReducer와 composition 결합하면 상태 머신 만들기 쉬워요. 대안 도구: fp-ts나 Sanctuary 라이브러리, 하지만 초보는 vanilla JS부터. 주의사항: ES6+ 환경에서만 쓰세요. IE 지원 필요하면 Babel 트랜스파일.

직접 실행 팁: 1) 빈 fns 테스트: compose([], obj) === obj 확인. 2) 에러 핸들링: try-catch로 fn 호출 감싸세요. 3) 성능: 10개 이상 함수면 memoize 추가. React 훅 예: const useComposed = (fns) => useCallback(compose(fns), [fns]); 불필요 리렌더 막아요.

자막 첨언처럼, 완벽한 코드 없어요. 창의적으로 개선하세요. ESLint 세팅 팁: "prefer-arrow-callback" 규칙으로 화살표 함수 강제. 실수 예: i++를 루프 끝에 두면 인덱스 1부터 시작 실수. 수정: let i = 0; while (i < fns.length) { ... i++; }. 이걸로 코드 리뷰할 때 자신감 생겨요. 연습: 기존 React 컴포넌트에 composition 적용해보세요. 결과? 코드 라인 30% 줄고 가독성 업!