[토스 모닥불 감상문 및 회고] EP2. 함수형 프로그래밍, 프론트엔드 개발에 진짜 도움 될까? 👩‍💻💭

이번 영상을 보고 느낀점:
"나는 말하는 감자다...🥔" 하지만 이제 공부 하면 되지...
생소한 용어들이 쏟아져서 머리가 띵했다. 그래서 먼저 용어들을 '아주 간단히' 정리해보았다.

 

🧐 용어 정리

✔️ Currying (커링) & 부분 적용

: 여러 개의 매개변수를 받는 함수를 쪼개서, 일부 매개변수만 적용할 수 있도록 만드는 기법.

const multiply = (a) => (b) => (c) => a * b * c;
console.log(multiply(2)(3)(4)); // 24

 

✔️ 파이프라이닝 (Pipelining)

: 여러 개의 함수를 연결해서 코드를 읽기 쉽게 만드는 방법

const double = x => x * 2;
const increment = x => x + 1;
const square = x => x * x;

const pipeline = (...funcs) => x => funcs.reduce((v, f) => f(v), x);

const process = pipeline(double, increment, square);
console.log(process(3)); // ((3 * 2) + 1)^2 = 49

 

✔️ Lazy Evaluation (지연 평가)

: 필요할 때만 연산을 수행하는 기법. 불필요한 연산을 줄여서 성능을 높일 수 있음.
: 대표적으로 Lodash 라이브러리의 _.chain, _.value 함수를 이용해 지연 평가를 구현할 수 있다.
(출처: Inpa Dev 👨‍💻:티스토리, 이 게시글의 애니메이션을 직접 보는게 이해하기 좋아서 한번 보는 걸 추천)

 

ES6 엄격한 평가

javascriptconst arr = [4, 15, 20, 7, 3, 13, 2, 20]

const result = arr
    .filter(num => num < 10)  // 1. 10보다 작은 숫자만 필터링 → [4, 7, 3, 2]
    .slice(0, 3)              // 2. 3개만 고름 → [4, 7, 3]

console.log(result); // [4, 7, 3]

 

Lodash 지연 평가

const arr = [4, 15, 20, 7, 3, 13, 2, 20];

const result = _.chain(arr)
  .filter(num => num < 10) // 지연 평가를 시작합니다.
  .take(3)
  .value(); // 평가를 수행합니다.

console.log(result); // [4, 7, 3]

 

✔️ Flux Pattern

: React에서 데이터가 한 방향으로만 흐르도록 만드는 설계 패턴. Redux 같은 라이브러리가 대표적

// 1. 액션 생성 (주문 받기)
function createOrder(food) {
  return { type: "ORDER_FOOD", food };
}

// 2. 디스패처 (주문을 주방으로 전달)
function dispatcher(action) {
  store.update(action);
}

// 3. 스토어 (현재 주문 상태를 저장)
const store = {
  orders: [],
  update(action) {
    if (action.type === "ORDER_FOOD") {
      this.orders.push(action.food);
      view.render(); // 상태가 변경되면 화면 업데이트
    }
  }
};

// 4. 뷰 (화면에 주문 내역 표시)
const view = {
  render() {
    console.log("현재 주문 목록:", store.orders.join(", "));
  }
};

// 📢 주문하기
dispatcher(createOrder("햄버거"));
dispatcher(createOrder("감자튀김"));
dispatcher(createOrder("콜라"));

 

✔️ 단일 책임 원칙 (SRP)

: 하나의 함수나 객체는 한 가지 일만 해야 함

function fetchData() {
  return fetch('https://api.example.com/data').then(res => res.json());
}

function updateUI(data) {
  console.log('Updating UI with', data);
}

fetchData().then(updateUI);

 

✔️ 일급 객체 (First-class object)

: 함수를 변수처럼 다룰 수 있는 개념

const sayHello = () => console.log('Hello!');
const execute = (fn) => fn();
execute(sayHello); // Hello!

 

✔️ 합성 (Composition)

: 작은 기능들을 조합해서 더 큰 기능을 만드는 방식

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
const trim = str => str.trim();
const formatText = str => capitalize(trim(str));
console.log(formatText('  hello ')); // 'Hello'

 

✔️ 개방-폐쇄 원칙 (OCP)

: 확장에는 열려 있고, 수정에는 닫혀 있어야 함.

// 기존 할인 로직 (기본 할인율 적용)
class Discount {
  calculate(price) {
    return price * 0.9; // 기본 10% 할인
  }
}

// 새로운 할인 방식 추가 (OCP 원칙을 지키면서 확장)
class SeasonalDiscount extends Discount {
  calculate(price) {
    return price * 0.8; // 계절 할인: 20%
  }
}

class BlackFridayDiscount extends Discount {
  calculate(price) {
    return price * 0.5; // 블랙프라이데이 할인: 50%
  }
}

const baseDiscount = new Discount();
const seasonalDiscount = new SeasonalDiscount();
const blackFridayDiscount = new BlackFridayDiscount();

console.log(baseDiscount.calculate(100)); // 90
console.log(seasonalDiscount.calculate(100)); // 80
console.log(blackFridayDiscount.calculate(100)); // 50
// ➡ 기존 Discount 클래스를 수정하지 않고, 새로운 할인 방식을 추가할 수 있음

 

(이렇게 공부할게 많다니... 😞)

 

🔎 함수형 프로그래밍과 객체지향 프로그래밍의 차이

이 주제는 더 자세하게 공부해야할 것 같아서 별도로 글을 업로드할 예정이지만, 일단 영상에 나온 내용들을 바탕으로 아주아주 간단하게 써보자면!

 

🏗 객체지향 프로그래밍 (OOP)

OOP는 쉽게 말해서 "세상을 객체로 표현하자!"라는 패러다임이다. 자동차, 강아지, 사람 등등을 객체로 만들어서 상태(state)와 행동(method)을 정의하는 방식이다. 우리가 많이 쓰는 클래스, 모듈 시스템, 그리고 단일 책임 원칙(SRP)같은 개념들이 전부 OOP에서 나온거다.

 

🔧 함수형 프로그래밍 (FP)

반면 FP는 "상태 변화 없이, 깨끗하게 함수만 가지고 프로그램을 짜자!"라는 철학을 가지고 있다. 즉, 같은 입력이 들어가면 항상 같은 출력이 나와야 한다는 것.
그리고 데이터를 한 방향으로 흐르게 만드는 Flux 패턴, 불필요한 실행을 미루는 Lazy Evaluation같은 테크닉들이 FP의 강점이다.

🤝 FP랑 OOP는 싸우는 사이가 아니다!

영상을 보면서 제일 인상 깊었던 게 바로 이거다. "FP랑 OOP는 대립하는 게 아니라, 같이 쓰면 더 좋다!"라는 거.
OOP는 전체적인 프로그램 구조를 짜는 데 좋고, FP는 코드 가독성을 높이고 유지보수를 편하게 만드는 데 강점이 있다.

영상에서 나온 이야기 중, 두 패러다임을 섞어서 쓰는 좋은 예시가 나왔다.
React의 setState 메서드를 보면 두 가지 방법이 있다. 하나는 값을 바로 넘기는 것이고, 다른 하나는 함수를 전달해서 새로운 상태를 계산하는 방식인데, 이게 바로 OOP와 FP가 공존하는 예시라는 거다.
생각해보면 우리가 실무에서 쓰는 기술도 결국 두 패러다임을 섞어서 쓰고 있는거다.

 

📌 React의 setState에서 OOP와 FP가 공존하는 예시

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // OOP 방식: 값을 직접 설정
  const handleSetDirect = () => {
    setCount(count + 1);
  };

  // FP 방식: 이전 상태를 기반으로 새로운 상태 계산
  const handleSetFunctional = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleSetDirect}>OOP 방식 증가</button>
      <button onClick={handleSetFunctional}>FP 방식 증가</button>
    </div>
  );
}

 

🎬 결론

이번 영상을 보면서 "아.. 함수형 프로그래밍 제대로 공부해야겠다"는 생각이 확 들었다. 특히 React같은 라이브러리는 FP 요소가 많아서, 이걸 잘 활용하는게 중요할 것 같다.
이제부터는 그냥 코드만 짜는 게 아니라, "어떤 패러다임이 여기서 더 좋을까?"를 고민하는 개발자가 되고싶다.... 🥲
패러다임은 그냥 도구일 뿐, 중요한건 내가 얼마나 잘 활용하느냐! 열심히 공부하자..🔥

 

 

출처

Inpa Dev 👨‍💻:티스토리
Flux-패턴이란