[JavaScript] 리액트에서의 클로저 - 클로저(5)

5. 리액트에서의 클로저

지난 포스팅에서는 클로저를 활용한 메모이제이션의 예시 까지 살펴보았습니다. 지금까지 이 흐름을 잘 따라와주셨더라면 리액트에서 클로저를 어떻게 활용하고 있는지 감이 오실 수도 있을 것 같습니다. 혹시 React hook이 떠오르지 않으셨나요? 이번 포스팅에서는 리액트가 클로저를 어떻게 활용하고 있는지에 대해 다루겠습니다.

 

목차

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

 

리액트가 클래스형 컴포넌트였을 때는 render() 메서드를 통해 상태 변경을 감지할 수 있었습니다. 반면 함수형 컴포넌트는 렌더링이 발생하면 함수 자체가 다시 호출됩니다. 그래서 상태를 관리하려면 함수가 다시 호출되었을 때 이전 상태를 기억하고 있어야 합니다. 모두가 아시듯 리액트에서는 이 문제를 useState를 통해 해결하고 있죠.

---

Can Swyx recreate React Hooks and useState in under 30 min?

 

위의 영상에서 참고한 useState를 모방한 구현체입니다. 왼쪽에 React라는 큰 모듈이 있으며 React 모듈은 render함수와 useState hook을 리턴하고 있네요. 가운데의 Component를 보시면 useState가 count와 text로 두 개 선언되어 있는 것을 볼 수 있습니다.

여러 개의 state를 들고 있기 위해서는 hooks라는 배열로 관리하고 있으며 새로운 state를 선언할 때마다 해당 배열 내에 추가하게 됩니다.  
실제로는 setState로 state가 변경된 이후에 다시 render되어도 useState 함수는 클로저에 의해 계속 변경된 위치의 idx 를 바라보게 됩니다. 때문에 render 시마다 idx를 초기화해줍니다.

 

useState hook의 내부에 전역 idx를 참조시킨  _idx로 클로저를 활용해 각 useState의 _idx의 값은 내부에서 저장됩니다. 때문에 Component가 다시 렌더링되어도 (idx가 초기화되더라도) _idx값이 저장되어 있기 때문에 올바른 idx자리에 state가 저장되게 되는 것입니다. 

---

클로저를 이해하면 React 애플리케이션에서 일상적으로 사용하는 상태 관리, 라이프사이클 관리, 이벤트 핸들러 및 커스텀 훅을 더 잘 이해할 수 있습니다. 클로저 패턴은 이러한 다양한 측면에서 사용됩니다. 간단히 말하면, 클로저를 통해 우리는 현재 컴포넌트의 상태 및 데이터를 기억하고, 이전 값 또는 함수를 유지하며, React 애플리케이션의 동작을 제어하고 데이터 관리를 간소화합니다.

---

정리

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