[React] 3.3.2 순수 함수(함수형 프로그래밍의 개념) - 가온 코딩

함수형 프로그래밍의 핵심 개념인

1. 불변성(immutability)

2. 순수성(purity)

3. 데이터 변환(transformation)

4. 고차 함수

5. 재귀(recursion)

중 2. 순수성에 대해 설명하겠다.

 

순수 함수(pure Functions)는 파라미터에 의해서만 반환값이 결정되는 함수를 뜻한다. 순수 함수는 최소한 하나 이상의 인수를 받고, 인자가 같으면 항상 같은 값이나 함수를 반환한다. 순수 함수에는 부수 효과(side effect)가 없다. 부수 효과란 전역 변수를 설정하거나, 함수 내부나 애플리케이션에 있는 다른 상태를 변경하는 것을 말한다. 순수 함수는 인수를 변경 불가능한 데이터로 취급한다.

 

순수 함수를 이해하기 위해 순수하지 않은 함수를 먼저 하나 살펴보자.

1. Impure Function

var frederick = {
  name: "Frederick Douglass",
  canRead: false,
  canWrite: false
}

function selfEducate() {
  frederick.canRead = true
  frederick.canWrite = true
}

//
// Impure function, no arguments, no returns, 
//   and it mutates the origional object
//

selfEducate()

console.log( frederick )

selfEducate 함수는 순수하지 않다.

인자를 취하지 않으며, 값을 반환하거나 함수를 반환하지도 않고, 자신의 영역 밖에 있는 frederick 이라는 변수를 바꿔버린다.

selfEducate 함수를 호출하면 '세계'의 일부분이 바뀌는 것이다. 즉, 함수 호출에 따른 부수 효과가 발생한다.

 

2. Object Mutation

이제 selfEducate가 파라미터를 받게 만들자.

 

var frederick = {
  name: "Frederick Douglass",
  canRead: false,
  canWrite: false
}

const selfEducate = person => {
  person.canRead = true
  person.canWrite = true
  return person
}

//
// still impure, mutates the origional object
//

console.log( selfEducate(frederick) )
console.log( frederick )

파라미터를 받기는 하지만, 이 selfEducate 함수도 순수하지 않다.

이 함수에도 부수 효과가 있기 때문이다. 이를 호출하면 인수로 넘긴 객체의 필드가 바뀐다.

이 함수에 전달된 객체를 불변 데이터로 취급한다면 순수 함수를 얻을 수 있을 것이다.

 

 

순수 함수는 자연적으로 테스트하기 쉽다(testable).
순수 함수는 자신의 환경 또는 '세계'를 변화시키지 않기 때문에 복잡한 테스트 준비 과정(setup)이나 정리 과정(teardown)이 필요하지 않다.
순수 함수를 테스트할 때는 함수에 전달되는 인수만 제어하면 되며, 인자에 따른 결괏값을 예상할 수 있다. 이 selfEducate 함수는 순수하지 않은 함수이다. 이 함수는 인수로 받은 객체를 변이시킨다.
만약 전달받은 인수를 불변 데이터로 취급한다면, selfEducate는 순수 함수가 됐을 것이다.

 

3. Pure Function

받은 파라미터를 변경하지 않도록 함수 본문을 다시 작성하자.

var frederick = {
  name: "Frederick Douglass",
  canRead: false,
  canWrite: false
}

const selfEducate = person => 
    ({ 
        ...person, 
        canRead: true, 
        canWrite: true 
    })

//
// Pure Function, takes an argument, returns an object, 
//    and causes zero side effects
//

console.log( selfEducate(frederick) )
console.log( frederick )

드디어 selfEducate가 순수 함수가 됐다!!!

이 함수는 전달받은 인자 person으로부터 새로운 값을 계산한다.

새 값을 계산할 때 전달받은 인자를 변경하지 않고 새로 만든 객체를 반환한다.

따라서 이 함수에는 부수 효과가 없다.

 

4. Side Effects

이제 DOM을 변경하는 순수하지 않은 함수를 살펴보자.

function Header(text) {
  let h1 = document.createElement('h1')
  h1.innerText = text
  document.body.appendChild(h1)
}

Header("Header() caused side effects")

Header 함수는 머릿글을 만든다. 이 함수는 인자로 받은 텍스트를 머릿글에 넣는다.

순수하지 않은 함수다.

함수나 값을 반환하지 않으며 DOM을 변경하는 부수 효과를 발생시킨다.

 

5. React Component

리액트에서는 UI를 순수 함수로 표현한다. 아래에서 Header는 머릿글을 만들어내는 순수 함수이다.

이 함수가 만들어내는 머릿글은 앞에서 본 머릿글과 같이 엘리먼트 하나로 구성된다. 하지만 DOM을 변경하는 부수 효과를 발생시키지 않고 엘리먼트를 반환한다.

이 함수는 엘리먼트를 만드는 일만 책임지며, DOM을 변경하는 책임은 애플리케이션의 다른 부분이 담당해야 한다. 

const Header = (props) => <h1>{props.title}</h1>

ReactDOM.render(
  <Header title="React uses pure functions" />, 
  document.getElementById('react-container')
)

 

순수 함수는 함수형 프로그래밍의 핵심 개념이다. 이를 사용하면 애플리케이션의 상태에 영향을 미치지 않기 때문에 코딩이 편해진다.

아래 세 가지 규칙을 따르면 순수 함수를 만들 수 있다.

1 순수 함수는 파라미터를 최소 하나 이상 받아야 한다.

2 순수 함수는 값이나 다른 함수를 반환해야 한다.

3 순수 함수는 인자나 함수 밖에 있는 다른 변수를 변경하거나, 입출력을 수행해서는 안된다

 

 

참고자료

러닝 리액트(Learning React), 알렉스 뱅크스, 한빛미디어 (2021)