3.0 자바스크립트를 활용한 함수형 프로그래밍
- 1930년대 Lambda Calculus (람다 계산법, 알론조 처치 발명)
- 고차 함수; 다른 함수를 조작하고, 함수를 인자로 받거나 반환하는 것이 가능한 복잡한 함수
- 1950년대 Lisp (존 맥카시)
- 함수가 1급 시민/1급 멤버라는 개념 구현
- 변수에 함수 대입 가능, 함수를 다른 함수에 인자로 넘길 수 있음, 함수에서 함수를 만들어서 반환 가능
3.1 함수형이란 무엇인가?
- JS에서 함수가 1급 시민이므로 JS는 함수형 프로그래밍 지원
- 1급 시민: 함수를 값처럼 활용 가능
- 함수를 일반적인 데이터로 취급 가능
- 함수를 일반적인 값과 마찬가지로 저장하거나 읽어오거나, 애플리케이션에서 흘려보낼 수 있음
- JS에서는 함수가 애플리케이션의 데이터 표현 가능
- 함수를 변수에 넣을 수 있음
- 함수를 객체에 넣을 수 있음
- 함수를 배열에 넣을 수 있음
- 함수를 다른 함수에 인자로 넘길 수 있음 (인자로 넘기는 함수; 콜백 함수)
- 함수가 함수를 반환할 수도 있음 (고차 함수)
- 화살표 함수를 사용하면 코딩 훨씬 간편해짐
- 고차 함수; 함수가 함수를 인자로 받는 경우, 함수가 함수를 반환하는 경우
- 2개 이상 화살표 있으면 고차 함수임
3.2 명령형 프로그래밍과 선언적 프로그래밍 비교
- 선언적 프로그래밍: 필요한 것을 달성하는 과정을 하나하나 기술하는 것보다
필요한 것이 어떤 것인지를 기술하는 것에 더 방점을 두고 애플리케이션의 구조를 세워나가는 프로그래밍 스타일
- 어떤 일이 발생해야 하는지에 대해 기술하고, 실제로 그 작업을 처리하는 방법은 추상화를 통해 감춰짐
- 함수형 프로그래밍은 선언적 프로그래밍의 한 방식임
- 명령형 프로그래밍: 코드로 원하는 결과를 달성해 나가는 과정에만 관심을 두는 프로그래밍 스타일
- 원하는 것을 달성하는 방법에만 신경을 씀
- 명령형 프로그램에서는 코드 안에서 어떤 일이 벌어지는지 주석을 많이 달 필요가 있음
- ex. for 루프 돌고 if문 사용
3.3 함수형 프로그래밍 개념
- 불변성
- 함수형 프로그래밍에서는 데이터가 변할 수 없음
- 원본을 안전하게 유지 가능
- JS에서 함수 인자는 실제 데이터에 대한 참조임
- 순수 함수
- 순수 함수: 파라미터에 의해서만 반환값이 결정되는 함수
- 최소한 하나 이상의 인수 받고, 인자가 같으면 항상 같은 값이나 함수 반환
- 인수를 변경 불가능한 데이터로 취급
- side effect 없음 (전역 변수 설정, 함수 내부나 애플리케이션에 있는 다른 상태 변경 등)
- 순수 함수는 테스트하기 쉬움
- 리액트에서는 UI를 순수 함수로 표현
- 데이터 변환
- 함수형 프로그래밍은 한 데이터를 다른 데이터로 변환하는 것이 전부임
- 함수를 사용해 원본을 변경한 복사본을 만들어냄
- 순수 함수를 사용해 데이터를 변경하면 코드 복잡도 감소
- 배열에서 원소를 제거할 필요가 있으면 filter 순수 함수 사용!
- 고차 함수
- 고차 함수: 다른 함수를 조작할 수 있는 함수
- 다른 함수를 인자로 받을 수 있거나 함수 반환 가능
- JS에서 비동기적인 실행 맥락을 처리할 때 유용
- 함수를 반환하는 고차 함수 사용 시 필요할 때 재활용할 수 있는 함수 만들 수 있음
- 커링: 고차 함수 관련된 함수형 프로그래밍 기법
- 어떤 연산을 수행할 때 필요한 값 중 일부를 저장하고 나중에 나머지 값 전달받는 기법
- 커링된 함수; 다른 함수를 반환하는 함수
- 재귀
- 재귀: 자기 자신을 호출하는 함수
- 데이터 구조 검색 시 재귀가 유용
- 합성
- 함수형 프로그램은 로직을 구체적인 작업을 담당하는 여러 작은 순수 함수로 나눔
- 함수를 연쇄적으로 호출하는 chaining
- 함수를 더 큰 함수로 조합해주는 compose 함수
- 하나로 합치기
- 함수형 프로그래밍에서는 가능하면 값 보다는 함수 활용
'Books > 러닝 리액트 ✔️' 카테고리의 다른 글
| [Learning React] 6장 - 리액트 상태 관리 (0) | 2022.02.01 |
|---|---|
| [Learning React] 5장 - JSX를 사용하는 리액트 (0) | 2022.01.31 |
| [Learning React] 4장 - 리액트의 작동 원리 (0) | 2022.01.31 |
| [Learning React] 2장 - 리액트를 위한 자바스크립트 (0) | 2022.01.28 |
| [Learning React] 1장 - 리액트 소개 (0) | 2021.12.11 |
댓글