[React] 순수함수 (pure function)

본 글은 러닝 리액트 3장 자바스크립트를 활용한 함수형 프로그래밍 을 정리한 글입니다

---

1. 서론

리액트를 처음에 공부할 때 왜 props는 항상 read-only 인걸까 라는 의문만 갖고 있었지 따로 찾아보지 않은 것 같다.
그냥 어느 글을 보더라도 똑같이 부모 컴포넌트에서 내려준 props를 자식 컴포넌트에서 변화시켜서는 안되며, props를 변화시키고 싶다면 부모 컴포넌트에서 state를 변화시켜야한다 라고 말해서 너무 당연하게 생각했던 것 같다.
근데 그 이유가 순수 함수처럼 사용되야하기 때문이였다는게 이번에 정리됐다.

2. 순수함수?

리액트 공홈에서는 리액트는 매우 유연하지만 한 가지 엄격한 규칙이 있다고 한다.

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.

여기서 말하는 순수함수는 아래와 같다.

• 파라미터에 의해서만 반환 값이 결정되는 함수 (최소 1개 이상)
• 사이드 이팩트 (인자, 함수 밖에 있는 다른 상태를 변경하는 것) 가 없는 함수
• return 값(값이나 함수)으로만 다른 외부 코드와 소통하는 함수
• 입출력을 수행해서는 안되는 함수 (console.log도 찍으면 안됨)

3. 예시

const info = {
  name: "aezing",
  age: 25,
  gender: "male"
}

const updateInfo = () => {
  info.name = "aejin";
  info.gender = "female";
  
  return info;
}

updateInfo();
console.log(info); // { name: "aejin", age: 25, gender: "female" }

여기서 updateInfo는 인자를 취하지 않으며, 자신 영역 밖에 있는 info 변수를 바꾸고, 값을 반환하지 않는다.
즉, 사이드 이펙트가 발생한다.

const info = {
  name: "aezing",
  age: 25,
  gender: "male"
}

const updateInfo = (person) => ({
  ...person,
  name: "aejin",
  gender: "female"
});

console.log(updateInfo(info)); // { name: "aejin", age: 25, gender: "female" }
console.log(info); // { name: "aezing", age: 25, gender: "male" }

updateInfo를 순수함수로 바꾸면 위와 같다
전달받은 person 인자로부터 새로운 값을 계산한다. 새 값을 계산할 때 전달받은 인자를 변경하지 않고 새로 만든 객체를 반환한다. 그렇기 때문에 사이드 이펙트도 발생하지 않는다.

4. React에서는?

리액트에서는 UI를 순수 함수로 표현한다.

const Text = (props) => <p>{props.text}</p>

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

순수 함수를 사용하면 애플리케이션의 상태에 영향을 미치지 않기 때문에 개발이 편해진다.