리액트와 순수함수

리액트 공식문서를 보면

 

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

 

라는 말이 나온다. (https://ko.reactjs.org/docs/components-and-props.html)

 

 

무지성으로 혹은 관습적으로 본능에 맞긴 채 컴포넌트 분리를 하고 왔던 터라, 순수함수가 궁금해졌다.

 

 

 

찾아보니 다들 비슷한 정의이긴 했는데... 믿을만한 소스가 없어서 위키에서 검색해봤다.

 

 

1. 함수에 같은 값을 주면 항상 같은 값을 줘야한다.

2. 외부의 상태를 변경하지 않는다.

 

- 그냥 보면 이해가 안 갈 것이기 때문에 예시를 들고 왔다.

fucntion add(a, b){
	return a+b;
}

add(3,5) //8

많이들 보여주는 예시이다.

 

외부 값이 변하지 않고, 인자로 3과 5를 넘겨주면 항상 8이 나온다.

 

 

 

다른 예시가 더 많으니 위키를 참조하시고(https://en.wikipedia.org/wiki/Pure_function)

 

순수함수를 지향해야하는 이유가 뭘까?

 

리액트에서는 props가 읽기 전용이기 때문이라고 한다.

 

따라서 props로 받은 값을 직접 수정해서는 안된다.

 

.

.

 

흠 내가 보기엔 setState등을 넘겨받아서 props를 수정해주는 것도 우회를 했을 뿐

 

순수함수에서의 원칙인 외부 상태를 변경하지 않는다. 를 어기는 것 같은데...

 

'순수 함수처럼'

 

동작하게 하는게 키 포인트가 아닐까 싶다.