React의 강의를 들은 후 개인 프로젝트를 진행하면서 여러가지 문제에 부딪히고 기본적인 것도 다시 한번 짚게되고 새로 알게 된 부분도 많았는데요, 그 중 기본적이지만 왜? 라고 다시 한번 생각해보게 된 주제를 가져왔습니다.

Optional Function

React 컴포넌트에서 prop과 state를 필수로 요구하지 않는 함수를 컴포넌트 바깥에서 선언하고 호이스팅하는 이유는 크게 성능 및 코드 유지보수 측면에서 이점이 있습니다.

성능 최적화

컴포넌트 내부에서 함수가 정의되면 렌더링마다 새로운 함수가 생성될 가능성이 높습니다. 하지만 컴포넌트 바깥에서 선언하게 된다면 컴포넌트가 리렌더링될 때마다 함수가 재생성되지 않고 재사용을 하기 때문에 이에 따라 성능이 향상될 수 있습니다.

코드 유지보수

컴포넌트 내부에서 함수를 정의하면 해당 컴포넌트의 코드가 길어지고 가독성이 떨어질 수 있습니다. 이에 따라 함수를 컴포넌트 외부로 분리하면 코드를 더 모듈화하고 재사용성을 높일 수 있습니다.

의존성 관리

state 와 props를 필수로 요구하지 않기 때문에 당연히 이 두가지에 따른 의존성이 없습니다. 즉 외부로 꺼낸 함수는 독립적으로 테스트 가능합니다.

클로저 문제 회피

컴포넌트 내부에서 함수를 정의하면 해당 함수는 클로저를 형성하게 될 수 있는데요, 그 경우에 렌더링 할 때 마다 새로운 클로저가 생성되어 메모리 소비가 증가할 수 있습니다.

다시 말하자면, 가장 크게는 성능 개선과 코드 유지보수를 위해 컴포넌트 외부로 분리하여 선언하고 호이스팅 하는 방법을 권장하고 있습니다.

사실 프론트엔드 개발을 하면서 호이스팅은 무조건 지양해야한다 라는 생각을 가지고있었는데, 이러한 이점들이 있다면 납득 하게 되었네요. 호이스팅에 대한 오해가 너무 강렬하게 남아있었네요..

그런데 GC 가 해당 부분을 잘 삭제 할까? 라는 의문점

사실 이러한 의문이 계속 뒤따라왔습니다. 컴포넌트 컨텍스트 외부에 함수를 선언하면 메모리 누수가 생기지 않을까? 가비지콜렉터가 잘 삭제를 할까? 분명 내가 알기로는 가비지콜렉터가 바로바로 지우는 부분이 아니였는데..

궁금증을 해결하기 위해 ... 개발자 도구를 이용해보았습니다.

컴포넌트가 마운트 된 후 외부에서 선언한 addNumberInComponent 함수를 확인 할 수 있습니다.

그 후에 언마운트 된 상태라면 해당 함수는 보이지 않습니다.

저는 이 부분을 리액트의 컴포넌트가 언마운트 되면 GC가 처리하는 걸로 이해했습니다.

일반적으로 자바스크립트에서 데이터는 모든 참조가 제거되면 가비지 컬렉션에 의해 정리됩니다. React 컴포넌트 내에서 데이터가 캡슐화되어 있는 경우, React가 컴포넌트를 언마운트할 때 자동으로 가비지 컬렉션이 발생합니다.
(https://developers.soundcloud.com/blog/garbage-collection-in-redux-applications)

이런 방식을 가지고있다면, 코드의 가독성을 위해 확실히 순수함수들은 컴포넌트 외부에 함수를 선언하는 방식이 훨씬 더 좋을 것 같습니다.

리액트를 배우면서 적응하기 위해 개인 프로젝트를 따로 진행중인데 아직도 갈 길이 멀었네요. ㅎㅎ;;