순수함수(pure function)

2023. 4. 5. 12:46웹개발 메모장

728x90
SMALL

 

순수함수란? 

  • 사이드 이펙트가 없어야 합니다.
  • 몇번을 호출해도 반환 값이 동일해야 합니다.
  • 전역변수를 건들거나, DOM 을 편집하거나, console.log 처럼 로그를 찍거나, new Date() 와 같이 시간에 의존해서도 안됩니다.
현대 프로그래밍에서 불변성(immutability)이 주목받으며 함께 부각된 개념 중 하나입니다.

 

순수함수의 장점

  • 유닛테스트에 용이합니다.
    • 외부 환경에 의존하지 않기 때문에 코드를 테스트하기 굉장히 쉬워집니다.
  • 신뢰할 수 있습니다.
    • 실행 시점이나 실행 컨텍스트에 따라서 결과가 변경되지 않기 때문에 신뢰할 수 있습니다.
  • SRP(Single Responsibility Principal) 를 지키기 쉽습니다.
    • 함수를 순수하게 구성하다보면, 함수가 짧게 작성되고 하나의 역할만할 확률이 높습니다.
  • 함수들을 조합하여 사용하기 좋습니다.
    • 함수 개개의 역할이 명확하기 때문에 조합하여 사용하여도 예측할 수 있는 결과가 나옵니다.
  • 협업에 유리합니다.
    • 최대한 무상태에 가깝게 코딩하게 되므로, 다른 개발자가 상태를 잘못건드려 실수하는 일을 예방할 수 있습니다.

 

순수함수의 단점

  • 순수함에 너무 집착하다보면 개발 효율이 떨어질 수 있습니다.
  • 개발 난이도가 높고, 현실적으로 모든 팀원이 작성한 함수를 순수하게 유지한다는 것은 이상적인 이야기입니다.
  • 결국 최대한 순수하게 함수를 작성하려고 노력하는 것이 한계입니다.
    • 테스트하기 쉬운 코드를 작성하다보면, 자연스레 이룰 수 있는 것이기도 합니다.

불변성이란

불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말한다. 자바스크립트의 데이터 형태중에 원시 데이터(숫자, 문자, 불리언등)는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성 없다.

 

불변성을 지켜야 하는 이유

불변성을 지킴으로써 예기치못한 사이드이펙트를 방지할 수 있다.
리액트에서 state를 직접 변경하지 않고 setState를 사용하는 것이 바로 불변성을 지키는 방법이다.

 

리액트에서 불변성을 지킨다는 것은?

리액트에서는 화면을 리렌더링 할지 말지 결정할 때 state의 변화를 확인한다. 이때, state가 변했는지 변하지 않았는지 확인하는 방법이 state의 변화 전, 후의 메모리 주소를 비교하는 것이다. 만약 리액트에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지켜주지 않고, 직접 수정을 가하면 값은 바뀌지만 메모리주소는 변함이 없게 되는것이다. 즉, 개발자가 값은 바꿨지만 리액트는 state가 변했다고 인지하지 못하게 된다. 마땅히 일어나야 할 리렌더링이 일어나지 않게되버리는 것이다.

 

 

더보기

 

 

728x90
LIST

'웹개발 메모장' 카테고리의 다른 글

Semantic Elements in HTML  (0) 2023.04.06
React의 state와 props  (0) 2023.04.05
Cookie의 MaxAge, Expires 옵션에 대해서  (0) 2023.04.04
useRef는 언제 사용할까  (0) 2023.04.04
const 키워드에 대해  (0) 2023.04.03