onCreate와 JS비동기성

안녕하세요 이정환입니다.

우선 컴포넌트 내부에 선언한 순서대로 함수가 실행되는 것은 아닙니다. 생성은 순서대로 되겠지만 실제로 함수가 실행되는 시점은 이벤트가 발생하거나하는 호출 시점이 됩니다.

우리 코드에서는 다음과 같이 onCreate 함수에 useCallback을 적용해 마운트 시점에만 단 한번만 함수를 재 생성하도록 설정해두었습니다.

const onCreate = useCallback( ( ) => {...},  [] )

따라서 이 함수는 App 컴포넌트의 마운트 시점의 데이터를 참조하게 됩니다. 쉽게 말하면 해당 함수 내부에서 사용하는 data State의 값은 이 함수가 생성 되었을 시점에 고정 되므로 빈 배열이 됩니다. 이렇게 되는 이유는 onCreate 함수가 다시는 생성되지 않기 때문입니다.