📆 날짜

2023/12/12(화)

📚 챕터

함수를 만들 때 주의해야 할 사항

---

👨🏻‍💻 학습 내용

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

함수의 부수 효과(side-effect)란 함수 내의 작동으로 인해 함수가 아닌 함수 외부에 영향을 끼치는 것을 의미한다.이러한 부수 효과가 없는 함수를 순수 함수라하고, 부수 효과가 존재하는 함수를 비순수 함수라고한다.
순수 함수 : 부수효과가 없고 , 언제 어디서나 어떠한 상황에서든 동일한 인수를 받으면 동일한 결과를 반환한다.

<script>
function PureComponent(props) {
 const { a,b } = props
 return <div> { a,b } </div>
}
</script>

이 컴포넌트는 순수한 함수형 컴포넌트로 분류할 수 있다.
props의 값을 기준으로 a,b를 더하고, 그 결과를
HTMLDivElement로 렌더링 하고 있다.
외부에 어떤 영향을 미치지도 않았고,언제 어디서든 동일한 인수를 받아서 동일한 결과를 반환하기 때문에 순수한 함수형 컴포넌트라고 볼 수 있다.
순수한 함수는 언제 실행되든 항상 결과가 동일하기 때문에 예측 가능하며
안정적이라는 장점이 있다.
하지만 웹 에플리케이션을 만드는 과정에서 부수 효과는
어떻게 보면 피할 수 없는 요소다.
컴포넌트 내부에서 API를 호출한다면 외부에 어떠한 영향(HTTP requset)을 끼쳤으므로 부수 효과다. console.log또한 브라우저의 콘솔 창이라는 외부에 영향을 미쳤으므로 부수 효과다.HTML title을 바꿨다면 이 또한 외부에 영향을 미쳤으므로 부수 효과다.이러한 부수 효과를 최대한 억제할 수 있는 방향으로 함수를 설계해야 한다.
리액트 관점에서 본다면 부수 효과를 처리하는 훅인 useEffect의 작동을 최소화하는 것이 그 일환이라 할 수 있다. useEffect의 사용은 피할 수 없지만
최소한으로 줄임으로써 함수의 역할을 좁히고, 버그를 줄이며,컴포넌트의 안정성을 높일 수 있다.

🎯 가능한 한 함수를 작게 만들자

ESLint에는 max-lines-per-function이라는 규칙이 있다.
함수당 코드의 길이가 길어질수록 코드 냄새(문제를 일으킬 여지가 있는 코드)
가 날 확률이 커지고,내부에서 무슨 일이 일어나는지 추적하기 어려워진다.
이 규칙에서는 기본값으로 50줄 이상이 넘어가면 과도하게 커진 함수로 분류하고 경고 메시지를 출력한다.그 외에도 중첩이 얼마나 많이 있고 콜백은 얼마나 많은지도 이 규칙에서 확인이 가능하다.
ESLint의 규칙 요점은 하나의 함수에서 너무나 많은 일을 하지 않게 하는 것이다.함수는 하나의 일을, 그 하나만 잘하면된다. 함수의 원래 목적인 재사용성을 높일 수 있는 방법이다.글쓴 시점으로 팀원들과 프로젝트를 협업하여 진행중인데 ESLint의 중요성을 정확히 파악하지 못하고 사용을 안하고있었다. 당장 이 사실을 알리고 내일부터 ESLint를 활용하여 작업 진행을 하는게 좋겠다.

🎯 누구나 이해할 수 있는 이름을 붙히자

본인이 사용하는 프로젝트의 프레임워크에 Terser가 설치돼 있다면 한글로 네이밍 하는 것도 좋은 방법이 될 수 있다.Terser는 자바스크립트 코드를 맹글링(mangling, 코드를 컴파일러가 이해할 수 있는 수준에서 단순화)및 압축하는 도구다.
Terser

위 링크를 방문해서 한번 테스트 해 보면 한글로 변수명이나 함수명을 작성해도 최종 결과물에 크게 문제가 없다는 사실을 알게 될 것이다.
한글 변수명을 사용한 코드를 Terser같은 프레임워크로 압축할 수 있다는것만 인지하고있으면 된다.
코드 크기나 번들링 속도에 단점이 있지만,실제 서비스되는 코드에는 영향을 미치지 않고, 한글이 편한 한국 개발자들에게 함수나 변수 네이밍에 있어 자유를 준다는 점에서 고려해볼만 한 프레임워크다.

🎯 정리

함수라는 기초를 잘 다져둔다면 리액트 애플리케이션 제작뿐만 아니라 자바스크립트 생태계를 이해하는 데 많은 도움이 될 것이다.

➡️ 다음 글 에서는 클래스에 대해 살펴보자.