[JavaScript] 클로저 사용 시 주의할 점 - 클로저(6)

6. 클로저 사용 시 주의할 점

지금까지의 내용을 정리해보면 클로저의 특징을 이해하고 리액트에서 클로저가 어떻게 사용되는지 살펴보았습니다. 이제 저희는 클로저를 이해했으며, 리액트에서의 훅이 클로저와 밀접하게 관련되어 있음을 알게 되었습니다. 따라서 클로저를 잘못 사용한다면 즉,  훅을 올바르게 활용하지 못한다면 예기치 않은 문제가 발생할 수 있다는 점을 생각하시게 될 것 같습니다.

 

---

목차

1. 자바스크립트에서 함수는 “값"이다.
2. 고차함수
3. 클로저의 이해
4. 클로저와 메모이제이션
5. 리액트에서의 클로저
6. 클로저 사용 시 주의할 점
7. (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고)

---

 

그리고 이슈가 발생했을 때 이슈를 바라보는 관점도 달라지실 것 같습니다. 클로저를 제대로 이해하기 전에는 흔한 이슈는 아니지만 ‘무한렌더링', 성능이슈가 있을 경우 어딘가 잘 못 짠 곳이 있겠지..라는 생각만 했다면 내가 만든 함수가 어디서 참조되고 있는 것은 아닐까? 라는 생각으로 확장될 수 있다는 생각이 들었습니다. 우리가 마주했던 또는 마주할 수 있는 렌더링이슈는 리액트의 훅 내부에서 클로저 함수를 참조하고 있기 때문입니다. 클로저에 개념에 집중해 참조되는 변수를 차근차근 따라가보면 디버깅에 도움이 될 것 같습니다.

 

 

 

---

대표적인 클로저 사용의 주의점입니다. 메모리 누수발생, 바깥 변수의 오남용으로 예상치 못한 상태 변경, 성능고려, 변수 충돌, 코드 가독성이 있네요. 아마 여러분들은 이미 이런 주의점을 클로저를 잘 이해한 상태가 아니더라도 주의하며 설계를 하시고 계실 것 같습니다. 여기서 메모리 누수 발생과 성능문제는 왜 발생할 수 있을까요? 이는 함수형 컴포넌트는 렌더링시 재호출하며 클로저가 사용된 함수가 있다면 각각의 참조를 만들어 가비지 컬렉터에 수집되지 않을 수 있기 때문입니다. 그래서 hook에서 dependency array에 적절한 값을 넣기, 변경이 자주 되는 값에 메모 씌우기 등은 클로저의 이점을 누리기 전에 성능 저하를 겪을 수 있습니다.

---

 

정리

이렇게 클로저 사용 시 주의해야 할 점까지 다뤄보았습니다. 특히, 이슈가 발생했을 때 클로저의 관점에서 문제를 바라보면 더 나은 디버깅이 가능해질 것입니다. 특히, 리액트에서는 클로저가 사용된 함수가 렌더링 시 재호출되면서 각각의 참조가 만들어지기 때문에 메모리 누수와 성능 문제에 주의해야 합니다. 함수가 어디서 참조되고 있는지를 정확히 파악하여 렌더링 이슈를 해결하는 것이 중요하며, 클로저 개념에 집중함으로써 이를 확장할 수 있습니다.