[React] Effect Hook

Side Effect

함수 내에서 어떤 구현이 함수 외부에 영향을 끼칠 때 해당 함수는 Side Effect가 있다고 말합니다.

React에서는 컴포넌트 내에서 fetch를 이용해 API 정보를 가져오거나 이벤트를 활용해 DOM을 직접 조작 할 때에 Side Effect가 발생했다고 말합니다.

ex) setTimer, fetchAPI, localStorage

Pure Function

Pure Function은 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수입니다. 순수 함수는, 입력으로 전달된 값을 수정하지 않습니다.

useEffect

useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook 입니다.

useEffect의 첫 번째 인자는 함수입니다. 해당 함수 내에서 side effect를 실행하면 됩니다. 이 함수는 다음과 같은 조건에서 실행됩니다.

• 컴포넌트 생성 후 처음 화면에 렌더링(표시)
• 컴포넌트에 새로운 props가 전달되며 렌더링
• 컴포넌트에 상태(state)가 바뀌며 렌더링
• 이와 같이 매번 새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행됩니다.

useEffect의 두 번째 인자는 종속성 배열입니다. 배열 내의 종속성1, 또는 종속성2의 값이 변할 때, 첫 번째 인자의 함수가 실행됩니다.

이떄 두 번쨰 인자로 빈 배열을 넣게되면 컴포넌트가 처음 생성될 때만 effect 함수가 실행됩니다. 이는 외부 API로 리소스를 받아오고나서, 더 이상 API 호출이 필요하지 않을 때 사용됩니다.

배열 내의 어떤 값이 변할 때에만, (effect가 발생하는) 함수가 실행됩니다.

Hook을 쓸 때 주의 할 점

• 최상위에서만 Hook을 호출합니다.
• React 함수 내에서 Hook을 호출합니다.