클로저

클로저 스코프가 생긴다. (변수의 유효범위)
각각의 파일은 하나의 스코프를 가진다. export 를 하면 하나의 객체로 export 되는 것.

블록 스코프는 원래 없었는데 생긴 것.

함수형 프로그래밍에서는 원래 상태를 저장할 수 없는데, 클로저를 이용해 객체 지향 프로그래밍처럼 함수를 저장할 수 있게 됨

함수형 프로그래밍

• 동일한 입력에는 동일한 값을 반환해야 함
• 외부 참조하는 것이 적어야 함

고차함수

• 함수를 '값'으로 취급하며 함수의 인자로 전달할 수 있음
• 함수가 함수를 반환할 수도 있음
• 함수 합성 가능

stateless(무상태)

• state를 유지하지 않는다. 필요하면 상태를 만든다.
• immutability
• 객체지향에서의 this를 사용하지 않는다.
• 상태가 공유될 필요가 없음

깊은 복사

• 리액트는 얕은 복사를 한다.
• 단점은 메모리가 많이 먹는다는 것.

프론트엔드에서의 함수형 프로그래밍

• Functional Reactive Programming
• Rx.js로 해야함. 근데 어려움...

함수 합성

• pipe: 함수를 생성하는 함수
• compose: args를 거꾸로 넣는 것... 수학한 사람들한테는 이게 더 익숙..

const pipe = (...args) => (str) => args.reduce((pre, curr) => curr(pre), str)

const trim = (str) => str.trim()
const normalize = (str) => str.normalize()
const str = ' \u0041\u006d\u00e9\u006c\u0069\u0065 '

pipe(trim, normalize, console.log)(str) // Amélie

import React, { useEffect, useState } from "react";

function ItemList() {
  const [filteredItems, setFilteredItems] = useState([]);

  const pipe = (...args)=> (data) => args.reduce((data, fn)=> fn(data), data)

  useEffect(() => {
    // fetchItems - filter - setFilteredItems 를 pipe
    const filter = (data)=> data.filter((item) => item.isFavorite)
    pipe(fetchItems, filter, setFilteredItems)()
  }, []);

  const fetchItems = () => {
    return [
      { id: 1, name: "Item 1", isFavorite: true },
      { id: 2, name: "Item 2", isFavorite: false },
      { id: 3, name: "Item 3", isFavorite: true }
      // ...
    ];
  };

  return (
    <div>
      <h2>관심목록</h2>
      <ul>
        {filteredItems.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default ItemList;

모나드

• 파이프에서 연결하다가 에러가 났을때 에러를 처리하는 방법