함수를 만들 때 주의 사항

함수의 부수 효과를 최대한 억제하라

함수의 부수 효과 (side-effect)

• 함수 내의 작동으로 인해 함수가 아닌 함수 외부에 영향을 끼치는 것을 의미
• 예)
  • 컴포넌트 외부에서 API를 호출 : 외부에 영향 (HTTP request)를 끼쳤음
  • console.log: 브라우저의 콘솔 창에 영향을 미쳤음
  • HTML 문서의 title을 바꿈
• 순수 함수
  • 부수 효과가 존재하지 않는 함수
  • 언제 어디서나 어떠한 상황에서든 동일한 인수를 받으면 동일한 결과를 반환
  • 작동 와중에 외부에 어떠한 영향도 미쳐서는 안 된다.
• 비순수 함수
  • 부수 효과가 존재하는 함수
• 리액트의 관점에서 본다면 부수 효과를 처리하는 훅인 useEffect의 작동을 최소화
  • 컴포넌트의 안정성을 높일 수 있다.

자바스크립트 함수에서는 가능한 부수 효과를 최소화 하고, 함수의 실행과 결과를 최대한 예측 가능하게 설계해야한다.

가능한 한 함수를 작게 만들어라

• 함수당 코드의 길이가 길어질수록 코드가 문제를 일으킬 확률이 커지고, 내부에서 무슨 일이 일어나는지 추적하기 어려워진다.
• 함수는 하나의 일을 잘하면 된다. (Do One Thing and Do It Well)
• 함수의 원래 목적인 재사용성을 높일 수 있는 방법

누구나 이해할 수 있는 이름을 붙여라

• 가능한 한 함수 이름은 간결하고 이해하기 쉽게 붙이는 것이 좋다.
• 리액트에서 useEffect나 useCallback 등의 훅에 넘겨주는 콜백 함수에 네이밍을 붙여준다면 가독성에 도움이 된다.

  useEffect(function apiRequest() {...}, [])

• apiRequest()를 호출하거나 접근할 수 있는건 아니지만 어떻게 작동하는지 알 수 있다.

출처: 모던 리액트 Deep Dive