React 순수 함수와 커링 기법

에듀캐스트 장고&리액트 강의를 듣고 정리하는 글이다.

리액트는 함수형 프로그래밍을 적극 활용

• 컴포넌트의 많은 루틴을 순수 함수로서 작성하기를 요구
  • 상탯값/속성값이 같으면, 항상 같은 값을 반환해야 한다.
  • 다른 Side effects를 발생시키지 않아야 한다. (HTTP 요청, 데이터 저장, 쿠키 조작 등)
• 컴포넌트의 상탯값은 불변 객체(Immutable Object)로 관리해야만 한다.
  • 수정할 때에는 기존 값을 변경하는 것이 아니라, 같은 이름의 새로운 객체를 생성한다.

이를 통해, UI 개발의 복잡도를 낮추고, 버그 활생 확률도 줄인다.

순수 함수

하나 이상의 인자를 받고, 인자를 변경하지 않고, 참조하여 새로운 값을 반환. Side Effects가 없도록 구성한다.

let tom = {
  name: "Tom",
  canRun: false
};

// 값은 변경해버림.
function not_pure_fn(){
  tom.canRun = true;
}

// 새로운 객체를 만들고 값은 변
function pure_fn1(person){
  return {
    ...person,
    canRun: true
  };
}

const pure_fn2 = (person) => ({
  ...person,
  canRun: true
});

순수 함수를 활용한 데이터 변환

reduce, filter, map, join 등이 있다.

• 자바스크립트 ```javascript const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const number = numbers.reduce((acc, n) => acc + n, 0); // 배열 합 구하기 console.log(number);

const even_numbers = numbers.filter(i => i % 2 ==0); consoel.log(even_numbers);

- 파이썬
```python
from functools import reduce

numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
number = reduce(lambda acc, n: acc + n, numbers, 0)
print(number)

even_numbers = filter(lambda i: i % 2 == 0, numbers)
print(tuple(even_numbers))

커링 (Currying)

일부의 인자를 고정한 새로운 함수를 반환하는 함수를 만드는 기법. 파이썬의 데코레이터랑 비슷하다고 생각하면 된다.

• 자바스크립트 ```javascript function userLogs(username){ function wrap(message){ console.log(${username} - ${message}); return wrap; } }

const log = userLogs(‘sjh’); log(‘Hello World’);

// #2 const userLogs = username => message => { console.log(${username} - ${message}); } const log = userLogs(‘sjh’); log(‘Hello World’); ```