Side Effect
함수 내부 구현으로 인해 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 한다.
Pure Function (순수 함수)는 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수이다. 즉, 입력으로 전달된 값을 수정하지 않는다.
Math.random()은 순수 함수가 아니다.
-> 출력을 예상할 수 없다.
fetch API를 이용해 AJAX 요청을 한다고 가정한다면 이는 순수 함수가 아니다.
-> 네트워크에 따라 다른 응답 코드를 받을 수 있다.
React의 함수 컴포넌트는 순수 함수로 작동한다. props가 입력으로, JSX Element가 출력으로 나간다. 여기에는 그 어떤 Side Effect도 없다.
하지만 보통 React를 사용할 때, AJAX 요청이 필요하거나, LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생한다. 이는 React의 입장에서는 전부 Side Effect이다.
타이머 사용 (setTimeout)
데이터 가져오기 (fetch API, localStorage
Side Effect를 다루기 위한 Hook인 Effect Hook
useEffect
useEffect는 컴포넌트 내에서 Side effect를 실행한다.
useEffect의 첫 번째 인자는 함수이다. 특정 조건에 해당 함수 내에서 side effect를 실행한다.
컴포넌트 생성 후 처음 화면에 렌더링(표시)
컴포넌트에 새로운 props가 전달되며 렌더링
컴포넌트에 상태(state)가 바뀌며 렌더링
이와 같이 매번 새롭게 컴포넌트가 렌더링 될 때 Effect Hook을 실행한다.
useEffect의 두 번째 인자는 배열이다. 이 종속성 배열에 어떤 값의 변경이 일어날 때 Effect Hook을 실행할 지 적는다.
useEffect(함수, [종속성1, 종속성2, ...])
종속성을 가지는 값 1 또는 2 이하 배열에 담은 여러 인자가 변할 때 실행시킨다.
만일 종속성 목록에 아무런 종속성도 없다면 컴포넌트가 처음 생성될 때만 실행된다.
