useEffect

useEffect

side Effect들을 함수의 body 자리(render)에서 실행시키면 안됨.
함수 컴포넌트의 리턴 값은 UI 요소, state, props의 변화가 있을 때마다 함수가 실행하고 리턴함. 이 말은 매 렌더링 때마다 함수 body에 있는 로직이 실행된다는 뜻.
렌더링을 막거나, 자동으로 불필요한 로직이 실행되는 것 되는 것을 막기 위해서 useEffect를 사용함

Side Effect를 일으키기 적절한 장소로서 useEffect hook을 제공
Side Effect를 렌더링 이후에 발생시킴(예외: useLayoutEffect). useEffect가 수행되는 시점에 이미 DOM이 업데이트되었음을 보장한다는 뜻이고, 바꿔 말하면 Side Effect가 렌더링에 영향을 주지 않도록 설계되었음을 의미.

Effect를 일으킬 타이밍은 앞서 설명했던 useEffect의 두 번째 인자인 의존성 배열(Dependancy Array)를 통해 표현

함수 컴포넌트 렌더링 순서

• 컴포넌트가 렌더링 됩니다. 최초로 진행되는 렌더링은 브라우저에 처음으로 이 컴포넌트가 보여졌다는 의미로 mount 라고 표현합니다.
• useEffect 첫 번째 인자로 넘겨준 함수(callback)가 실행됩니다(Side Effect).
• 다시 렌더링(re-render)이 일어납니다 (state나 props가 변경된 경우)
• useEffect는 두 번째 인자에 들어있는 의존성 배열을 체크합니다.
  • 만약 두 번째 인자에 아무런 값도 넘기지 않았거나 / 인자로 넘긴 배열에 들어있는 값 중 업데이트된 것이 하나라도 있다면 첫 번째 인자로 넘겨준 함수(callback)가 실행됩니다(Side Effect).
  • 하나도 없거나 빈 배열이라면, 아무런 일도 하지 않습니다.
• 만약 앞에서 일으킨 Effect에서 state나 props를 변경시켰다면 다시 렌더링이 일어납니다.
• (중략...)
• 컴포넌트가 필요 없어지면 화면에서 사라집니다. 컴포넌트가 브라우저의 화면에서 사라졌다는 의미로 unmount라고 표현합니다.