[React] props를 왜 순수 함수처럼 사용해야할까?

순수 함수는 함수형 프로그래밍에서 쓰이는 개념이다.

함수 내부에서 사용되는 값들이 외부의 영향을 주지 않고 어떠한 Input을 전달해도 똑같은 상태(타입)로 output을 반환해주는 기능을 하는 함수를 순수 함수라고 한다.

 

순수 함수의 조건

• 동일한 Parameter을 받으면 항상 똑같은 값을 Output 한다.
• retrun 값으로만 다른 외부 코드와 소통한다.
• 함수 외부에 영향을 끼치면 안된다.

예제

순수함수 :

 

const add = (a, b) => {
	return a + b;	
}

 

위 코드와 같은 경우가 순수 함수라고 할 수 있다. 들어온 Input의 상태를 그대로 가져갔고 외부의 어떠한 영향도 끼치지 않았다. 그렇다면 어떤 것이 순수 함수가 아닌가?

 

순수 함수가 아닌 예시 1 :

 

let c = 10;
const add = (a, b) => {
	return a + b + c;	
}

console.log(add(10, 4)) // 24

c = 20;
console.log(add(10, 4)) // 34

 

위 코드와 같은 경우가 순수 함수가 아니라고 할 수 있다.

함수 외부에 변수를 참조하면서 동일한 값을 입력해도 외부의 변수 c가 변경된다면 다른 값이 출력된다.

Input으로 들어온 a, b로만 이루어진 값이 아닌 c가 연산에 개입되었다. 이런 경우에는 순수 함수라고 할 수 없다.

 

순수 함수가 아닌 예시 2 :

 

let c = 10;
const add = (a, b) => {
  c = b;
  return a + b;
}

console.log('c: ', c); // 10
console.log(add3(5, 5)); // 10
console.log('c: ', c); // 5

 

위 코드는 함수 외부의 변수의 값을 수정하였다.

함수가 평가되는 시점에 c = b; 를  수행 하면서 현재 들어온 b에 값을 외부의 있는 변수 c에 대입한다.

이 경우 외부의 값을 변경 시켜 영향을 끼치므로 순수 함수가 아니다.

 

순수 함수가 아닌 예시 3 :

const withdraw = (a, b) => {
  a.num -= b;
}

 

위 코드는 자신의 Input 값을 수정하였기 때문에 순수 함수가 아니다.

a.num - b; 라면 괜찮겠지만 여기서 중요시 봐야할 것은 -= 대입 연산자를 사용하였다.

필요성

코딩을 하다보면 웬만한 프레임워크나 라이브러리를 사용하면 100줄은 금세 넘길 수 있다.

복잡한 코드들 중에서 디버깅을 한다고 가정할때 과연 100줄이 아닌 1000줄, 10000줄 혹은 그 이상이 되는 코드들은 어떻게 테스트해야 할까?

이러한 점에서 Input이 같으면 Output이 일정한 순수 함수로 코딩을 하면 예상하지 못한 Output이 나왔을 때 Input값만 점검하면 된다.
그 Input값 역시 다른 순수 함수의 Output이라면, 그 순수 함수를 확인해보면 된다.

전체의 코드를 모두 점검할 필요가 없다는 뜻이다. 그래서 함수형 프로그래밍에서는 순수함수를 사용한다.

React에서 순수 함수

리액트에서 순수 함수처럼 사용되는 것은 바로 props다.

유의 해야할건 props를 함수로 만들어 처리하라는 것이 아니다.

 

리액트 공식 문서에서는 props를 아래처럼 동작해야한다고 말한다.

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

이전 게시글에서도 말했지만 props는 변화되면 안된다. 다시말해서 "읽기 전용"이다.

부모 컴포넌트에서 내려준 props를 자식 컴포넌트에서 수정하면 안돼며 props를 변화 시키고 싶다면

부모 컴포넌트에서 state를 변화시켜야한다.