react.js를 처음 접했을 때는 모두 클래스 기반으로 작성하는 것과생명 주기에 대한 설명이 대부분이었습니다. react hook이 등장하고 성숙 단계에 들어서자 , 이제는 함수형 컴포넌트 형태로 작성하는 것이 대부분이 된 것 같습니다. 생명 주기에 따른 처리는 useEffect를 통해서, 상태 정보는 useState() 및 더 추상화 단계가 높은 hook를 이용해서 더 간략하고 명확하게 작성할 수 있게 되었습니다.
아래에 링크한 글에서 react hook이 어떻게 내부에 구현되어 있을까에 대해 쉽게 이해할 수 있도록 잘 설명을 하고 있습니다. 간단히 말해서, useState()와 useEffec() 와 같은 hook의 상태 정보는 React 모듈 내부에 클로저 배열로 저장되어 관리된다는 내용입니다.
그렇다면, react.js를 블랙박스로 보는 관점에서 — 내부는 볼 엄두도 내지 못했습니다. — 클래스 기반으로 작성된 컴포넌트는 react에서 생명 주기에 따라 적절하게 컴포넌트의 메소드를 호출할 것이라 예측할 수 있는데, 도대체 함수형 컴포넌트는 어떻게 호출을 하는 것일까 궁금해졌습니다.
결과부터 얘기하면, 함수형 컴포넌트는 상위의 컴포넌트의 상태가 변경될 때마다, 단순히 호출된다 로 정리할 수 있습니다.
간단히 확인할 수 있는 예제 코드를 작성해봤습니다.
실행은 sandbox에서 바로 실행해볼 수 있습니다. ‘change state’라고 이름을 붙인 버튼을 누를 때마다 App 컴포넌트의 상태(count)가 변하게 됩니다. 이에 따라 FuncComp가 호출되고 있음을 확인할 수 있습니다.(console의 로그에 호출되는 것을 확인할 수 있습니다.)
즉, 함수형 컴포넌트는 상위의 상태 변화에 따라 단순히 호출되는 함수라고 간단히 생각해볼 수 있을 것 같습니다. 함수형 컴포넌트의 상태는 useState, useEffect 와 같은 hook 를 통해서 관리되는 클로저를 통해서 유지된다고 정리할 수 있겠습니다.
