서론

학습 목표 📖

• 함수형 프로그래밍에 대한 이해
• React, Redux 내부 방식에 대한 이해

---

본론

개념

함수형 프로그래밍 이란?

함수형 프로그래밍이란 여러 프로그래밍 패러다임중 하나이다.

• Functional
• OOP
• Procedure
• Event-Driven

대표적인 프로그래밍 패러다임 중 하나로 현재 Redux에서는 함수형 프로그래밍을 기반으로 하고 있다.

함수형 프로그래밍의 장점

함수형 프로그래밍으로 코드를 작성시에 디버깅이 쉽고 간결하며 확장성이 용이하다는 점이 있다.

함수형 프로그래밍의 언어

OOP의 대표주자가 C++, Java라면 함수형 프로그래밍의 대표주자로는 Clojure과 Haskell 이 있다.

특징

고차함수(Higher Order Function)

고차함수란 무엇일까?

고차함수란 함수안에서 Argument로 함수를 받거나 반환 값으로 함수를 반환하는 함수를 말한다.

말로만 들으면 어려울 수 있는데 사실 JS로 그동안 코딩하면서 수도 없이 써왔다.

const arr = [1,2,3,4,5];
arr.map(el => el * 5);

위의 map함수도 인자로 함수를 받고 있으니 고차함수의 한 예시가 될 수 있다.

합성함수(Function Composition)

합성함수란 무엇일까?

합성함수는 고차함수로 이루어진 함수들을 합쳐서 재사용이 가능하고 불필요한 구문들을 줄이는 것을 말한다.

const add = (a,b) => a+b;
const subtraction = (a,b) => a-b;

substraction(add(10,15),5);

위와 같이 2개의 함수를 하나로 합친 것을 확인할 수 있다.

순수함수(Pure Function)

함수형 프로그래밍에서 핵심이 되는 내용으로 순수함수란 같은 인자값에 대해 같은 값을 반환하며 이에따라 사이드 이팩트가 없는 함수를 말한다.

일반 함수를 순수함수로 변환하면서 이해해보자.

//일반 함수
const printName = () => {
  console.log(name); //name은 글로벌 변수
}

//순수 함수
const printName = name => {
  console.log(name); 
}

const obj = {
 blog : 'velog',
 subject : 'functional programming'
}

//일반함수
const changeSubject = (obj) => {
 obj.subject = 'functional programming principle'; 
}

//순수함수
const changeSubject = (obj) => {
 return {
   ...obj,
   subject : 'functional programming principle';
 }
}

순수함수의 가장 중요한 점은 기존 state를 변경하지 않는다는 점이며 이를 불변성이라고 부른다.

순수함수의 이점

순수함수를 사용하는데에 어떠한 이점이 있을까?

함수만 보고 사용 용도를 파악하기가 쉬어 이에 따라 디버깅과 테스트하기가 굉장이 좋다.

또한 파라미터에 들어온 값이나 기존 state를 조작하지 않기 때문에 사이드 이펙트가 적다는것이 장점이다.

활용

커링(Currying)

const func = a => b => c => a + b+ c;

func(1)(2)(3); //6

커링은 func(a,b,c); 처럼 호출해 처리하는 함수를 func(a)(b)(c);와 같이 각각의 인수로 호출하는것을 말한다.

커링과 파이프를 활용한 함수 프로그래밍

import {pipe} from 'lodash/fp';

const blog = 'VELOG';

const toLowerCase = str => str.toLowerCase();
const addDot = str => `${str}.`;
const createTag = type => str => `<${type}>${str}</${type}>`

const transform = pipe(toLowerCase, addDot, createTag("div"));
const result = transform(blog); //<div>VELOG.</div>

파라미터 갯수를 맞추기 위해서 커링을 활용하여 함수형 프로그래밍 패러다임을 적용시켰다.

결론

함수형 프로그래밍이란 프로그래밍의 패러다임중 하나로서 고차함수를 순수함수로 구현하는것을 말한다는걸 알 수 있다.

순수함수의 중요한 특징인 불변성을 유지하기 위해 React, Redux에서 상태변화시에 왜 그렇게 복잡하게 구현을 하는지 알 수 있다.