순수함수란?

• input -> 어떠한 함수에서 외부의 데이터를 직접적으로 사용하지 않고, 파라미터로 받는다.
• output -> : input값에 의해 output이 결정되기 때문에 외부의 값들이 변경되더라도 함수 자체에는 외부에 영향을 받지 않기 때문에 Side-Effect가 없다.

순수 함수는 동일한 입력에 대해 항상 동일한 출력을 반환하며, 외부 상태를 변경하지 않는 함수를 말한다. 즉, 함수 내부에서 어떤 값이 변경되지 않으며, 외부에서 관찰 가능한 상태에도 영향을 주지 않는 함수다.

function sum(x,y) {
  return x + y
}

동일한 입력에 대해 항상 동일한 x+y 값을 출력한다

순수함수의 장점으로는

• 순수 함수는 불변성을 유지하기 때문에 코드의 예측 가능성과 안정성을 높여준다.
• 함수를 호출하면 항상 동일한 결과를 반환하기 때문에, 함수를 디버깅하거나 테스트하기 쉬워진다.
• 순수 함수는 병렬 처리와 메모이제이션 등을 적용하기 쉬워 성능을 향상시키는데 도움을 준다.

불변성?

Javascript에서 불변성이란 객체가 생성된 이후 그 상태를 변경할 수 없는 것을 의미한다.
상태를 변경할 수 없다는 것은, 객체의 프로퍼티를 변경할 수 없다는 것을 의미한다.
자바스크립트에서는 immutable type을 제외하고 모든 값은 객체(Object)타입이며 변할 수 있는 값이다. 그리고 객체는 새로 만들필요 없이 직접적으로 변경이 가능하다.

불변성을 지켜야 하는 이유?

불변성을 지키지 않는다면 위의 예시처럼 사용할 데이터가 어디서 어떻게 바뀌어가는지 흐름을 쫓아가기 어렵고, 이는 곧 예기치 못한 side effects나 버그로 이어지게 만든다.

리액트에서는 상태값을 업데이트 할 때 얕은복사를 통해 수행한다. 즉 객체의 속성 하나하나를 비교하는게 아니라 참조값만 비교하여 상태 변화를 감지한다.

따라서 Object or Array의 속성이나 값을 바꾸는 불변성이 없는 변경은 상태가 바뀌었다고 React에서 파악을 못하기 때문에 이런 불변성을 지키는 업데이트가 필요하다.

그러므로 배열이나 객체를 새로 생성해서 새로운 참조값을 만들어서 상태를 업데이트 한다.

이렇게 불변성을 지키면서 업데이트를 한다면, 사이드 이펙트를 방지할 수 있다. 외부에 존재하는 원본데이터를 직접 수정하지 않고, 원본데이터의 복사본을 만들어서 값을 사용하기에 예상치 못한 오류를 사전에 방지할 수 있다.
반대로 말하면, 만약 불변성을 지키지 않고 업데이트를 한다면 다른 어떤 곳에서 원본데이터를 사용하고 있다고 하면 어플리케이션 어딘가에서 사이드 이펙트가 일어날 가능성이 있다.

프로젝트 규모가 커진다면 사이드 이펙트가 발생했을 시, 문제가 일어난 곳과 그 원인을 찾기 어렵기 때문에 불변성을 지키는것이 중요하다