React 함수 컴포넌트 코드 실행순서

1. 함수 컴포넌트 내 코드 실행
함수 컴포넌트 내에서 선언된 변수, 상태(State), 이벤트 핸들러 등의 코드가 실행됩니다.
useState로 선언된 상태가 초기화되고, 다른 일반적인 JavaScript 코드가 실행됩니다.

 

 

2. Return문 실행:
return 문을 통해 JSX가 렌더링되고, 이를 통해 Virtual DOM이 업데이트됩니다.
이때, JSX 내에서 중괄호 {}를 사용하여 JavaScript 표현식을 사용할 수 있으며, 

이 부분도 함수 컴포넌트 내의 코드 실행으로 간주됩니다.

 

 

3. useEffect 실행:
useEffect 훅은 컴포넌트의 렌더링이 완료된 후에 실행됩니다.
useEffect 내에서 비동기 작업, 데이터 가져오기, DOM 조작 등을 수행할 수 있습니다.
useEffect는 렌더링 후 실행되기 때문에 DOM 요소에 대한 참조나 상태 변경 등을 수행할 때 주로 사용됩니다.
따라서 코드는 상단부터 차례대로 실행되며,

useEffect는 컴포넌트가 렌더링이 완료된 후에 실행되는 것이 일반적인 동작입니다.