Side Effect (부수 효과)
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 side Effect가 있다고 이야기 한다.
React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 side Effect가 발생했다고 말할 수 있다.
Side Effect 예제
let foo = 'hello';
function bar() {
foo = 'world';
}
bar(); // bar는 Side Effect를 발생시킵니다!Pure Function (순수 함수)
순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다. 순수 함수의 특징은, 어떠한 전달 인자가 주어질 경우 항상 똑같은 값이 리턴됨을 보장하기 때문에 예측 가능한 함수이기도 하다.
- 순수함수 조건
- 동일한 인자가 들어갈 경우 항상 같은 값이 나와야 한다.
- 부수적인 효과가 일어나면 안된다.
- return 값으로만 소통한다.
Pure Function 예제
function upper(str) {
return str.toUpperCase();
// toUpperCase 메소드는 원본을 수정하지 않는다. (Immutable)
}
upper('hello') // 'HELLO'퀴즈
- Math.random()은 순수 함수가 아니다. 그 이유는 ?
- 동일한 인자를 주어도 랜덤한 값으로 리턴되기 때문에 항상 같은 결과를 기대하기 어렵기 때문에 순수함수가 아니다.
- 함수가 fetch API를 이용해 AJAX 요청을 한다고 가정해 봅시다. 이 함수는 순수 함수가 아니다. 그 이유는 ?
- 네트워크 상황, 서버상태에 따라 응답코드가 달라지기 때문에 예측이 불가능하다.
React 애플리케이션을 작성할 때에는, AJAX 요청이 필요하거나, LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생할 수 있다. 이는 React의 입장에서는 전부 Side Effect 이며 React는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공한다.
useEffect
useEffect의 첫 번째 인자에는 함수를 넣으며 해당 함수 내에서 side effect를 실행할 수 있다. 두 번째 인자에는 의존값이 들어있는배열을 넣으며 이 조건은 어떤 값의 변경이 일어날 때를 의미한다. 따라서 배열엔 어떤 값의 목록이 들어가고 이 배열을 특별히 종속성 배열이라고 부른다.
useEffect(함수, [종속성1, 종속성2, ...])단 한 번만 실행되는 useEffect(함수, [ ])
또, useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부른다. leanup 함수는 useEffect 에 대한 뒷정리를 해주는 개념으로 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다.
useEffect 실행 조건
- 컴포넌트 생성 후 처음 화면에 렌더링
- 컴포넌트에 새로운 props가 전달되면 렌더링
- 컴포넌트 상태(state)가 바뀌면 렌더링
이와 같이 매번 새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행된다.
useEffect를 사용하여 마운트 됐을 때 (처음 나타났을 때)하는 작업
- props 로 받은 값을 컴포넌트의 로컬 상태로 설정
- 외부 API 요청 (REST API 등)
- 라이브러리 사용 (D3, Video.js 등...)
- setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약
useEffect를 사용하여 언마운트 됐을 때 (사라질 때)하는 작업
- setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
- 라이브러리 인스턴스 제거
useEffect 주의점
- 최상위에서만 Hook을 호출한다.
- React함수 내에서 Hook을 호출한다.
