[React] React Hook: useEffect()

React는 Component를 호출하고, Component는 React에게 HTML을 준다.

그럼 React는, 컴포넌트가 리턴한 HTML로 VDOM을 만들고, VDOM은 DOM을 만든다.

 

React이 Component를 호출했을 때 비동기 작업이 있다면, Component 안에서 비동기(async) 호출을 한다

비동기 호출은 Server에 요청을 하고, Server는 컴포넌트에게 응답(Data)을 준다

 

응답을 주는데 100ms의 시간이 걸린다면?

React가 Component를 호출했을 때, Component는 함수이기 때문에 호출 후 바로 리턴을 해야 하는데,

Component에서 HTML을 리턴하는데는 5ms가 걸린다면?

 

 

 

React가 Component를 호출하고 Component가 HTML을 React로 리턴하는데 5ms가 걸린다

그 사이 Component는 async 호출을 해서 100ms 뒤에 data를 받고 Component는 HTML을 생성하는데, 이미 리턴했잖아

 

React component는 함수라서 호출을 해야 리턴할 수 있음

호출을 하는 주체는 리액트임

이미 리액트는 5ms안에 컴포넌트 호출해서 VDOM만들고 DOM 만듬

하지만 한참 뒤에(100ms뒤에) 응답이 오면, 이후 HTML만들어서 주고 싶어도 줄 수가 없음.

 

그렇다면 비동기 작업은 어떡하지?

비동기작업: 순수함수가 아님, 항상 성공하는 작업이 아님. 성공할수도 있고 실패할 수도 있음, 부수효과(side effect) 가능한 코드들(예상할수 없는 코드들)임

순수함수: 항상 성공하는 함수 (예) 10*5 하는 함수, 

 

api 호출은 비동기 함수이므로 순수함수와 분리되어야 하고, 리액트에서는 useEffect()함수를 제공함

 

useEffect(리액트에서 제공해주는 Hook)

사이드이펙트(Side-Effect)를 관리해주는 함수

useEffect() 안에 비동기 함수를 처리하면, 비동기 처리가 끝난 후 리액트가 한번 더 컴포넌트를 호출해서 받아온 데이터가 적용된 HTML을 재렌더링함