[React] 함수형 프로그래밍이란?

함수형 프로그래밍

🧐 함수형 프로그래밍이란?

• 함수를 함수로 넘기거나 함수가 함수를 결과로 내놓는 것이 가능하다.
• 다른 함수를 조작하고, 함수를 인자로 받거나 반환하는 것이 가능한 고차함수 개념을 사용한다.

고차함수란?

아래와 같이 함수를 인자로 받거나 함수를 반환하는 함수

 

    const createScream = logger => message => logger(message.toUpperCase() + "!!!") 

 

• 자바스크립트에서도 함수가 1급 시민, 즉 정수나 문자열 같은 다른 일반적인 값과 마찬가지로 취급 할 수 있기 때문에 함수형 프로그래밍을 지원한다.
• 함수를 변수, 객체, 배열에 넣을 수 있으며, 다른 값과 맟나가지로 함수를 다른 함수에 인자로 넘길 수 있고, 반환할 수 도 있다.

  ///함수를 변수에 넣을 수 있다
  var log = message => console.log(message) 
  ///함수를 객체에 넣을 수 있다
  const obj = { 
      message : "함수를 객체에 넣을 수 있다."
      log(message) {
          console.log(message)
      }
  }
  //함수를 배열에 넣을 수 있다.
  const messages = {
      message => console.log(message)
      message => console.log(message)
  }

👉 명령형 프로그래밍과 선언적 프로그래밍

• 명령형 프로그래밍이란 필요한 것을 달성하는 과정을 하나하나 기술하는 프로그래밍
• 선언적 프로그래밍이란 필요한 것이 어떤 것인지 기술하는 데 방점을 두고 애플리케이션의 구조를 세워나가는 프로그래밍 스타일

예시 (문자열을 URL에서 사용할 수 있게 모든 공백을 하이픈으로 바꿔보자)

 

1) 명령형 프로그래밍 방식

  var string = "This is Minseung Park"
  var urlFrinedly = "";

  for(var i=0; i<string.length; i++){
      if(string[i] === " "){
          urlFrinedly += "-";
      }else{
          urlFrinedly += string[i];
      }
  }

 

2) 선언적 프로그래밍 방식

  const string = "This is Minseung Park"
  const urlFrinedly = string.replace(/ /g, "-") //string.replace와 정규식을 사용해서 모든 공백을 하이픈으로 변경

• 위에서 선언적 프로그래밍 방식은 구체적 절차 대신 replace라는 함수를 사용해 추상적인 개념을 표현했다.
• 선언적 프로그래밍의 코드 구문은 어떤 일이 발생해야 하는지 기술하고, 실제로 그 작업을 처리하는 방법은 추상화로 아랫단에 감춰짐.

 

예시(객체 모델(DOM)을 만들어 보자)

 

1) 명령형 프로그래밍 방식

  var target = document.getElementById('target')
  var wrapper = document.createElement('div')
  var headline = document.createElement('hi')

wrapper.id = "welcome"
headline.innerText = "Hello World"

wrapper.appendChild(headline)
target.appendChild(wrapper)

2) 선언전 프로그래밍 방식 (React)

  const {render} = ReactDOM

  const Welcome = () => (
      <div id="welcome">
          <h1>Hello World</h1>
      <div>
  )

  render(
      <Welcome />,
      document.getElementById('target')
  )

 

React(리액트)도 선언적이다.

 

• 선언적 접근 방식이 더 읽기 쉽고, 그래서 더 추론하기 쉽다.

👍 함수형 프로그래밍은 선언적 프로그래밍의 패러다임의 한 가지이다 (선언적 ⊃ 함수형)

🤜 함수형 프로그래밍의 개념

• 불변성
• 순수성
• 데이터 변환
• 고차 함수
• 재귀

(위 개념들을 클릭하시면 클릭하시면 더 자세히 파헤칠 수 있습니다.)