Side effect
pure function
useEffect
종속성 배열 dependency array
useEffect를 통한 AJAX 요청
로딩 화면의 필요성
: 부수 효과
함수 내부의 구현이 함수 외부에 영향을 끼치는 경우 = 해당 함수에 side effect가 있다고 한다.
React에서는 fetch를 사용해 API 정보를 가져오거나 DOM을 직접 조작할 때 side effect가 발생했다고 한다.
함수의 입력만이 함수의 결과에 영향을 주는 함수
입력으로 전달된 값을 수정하지 않는다. (immutable)
동일한 전달인자에 항상 동일한 값이 리턴됨을 보장한다. (예측 가능한 함수)
Math.random()
은 return이 매번 달라지므로 pure function이 아니다.
fetch API를 이용해 AJAX 요청하는 함수는 서버의 데이터에 Side Effect를 일으킬 수 있으므로 pure function이 아니다.
타이머 사용(setTimeout)
데이터 가져오기(fetch API, localStorage)
---> Side Effect를 다루기 위한 Hook 사용
컴포넌트 내에서 side effect를 실행할 수 있게 하는 Hook
useEffect(함수) //기본형
최상위에서만 Hook을 호출한다.
반복문, 조건문 혹은 중첩된 함수 내에서 X
최상위 레벨에서 호출할 때만 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 걸 보장한다.
React 함수 내에서만 Hook을 호출한다.
자바스크립트 함수 X
컴포넌트가 렌더링 되면 Effect Hook이 실행된다.
useEffect(함수, [종속성1, 종속성2...])
: useEffect의 두번째 인자 [deps]
함수가 실행되는 조건을 나타내지만 표현식이 아닌 value로 할당한다.
종속성 배열 요소의 값이 변할 때 함수
가 실행된다.
useEffect(함수, [])
컴포넌트가 처음 생성될 때만 함수
가 실행된다.
ex. 외부 API를 통해 리소스를 받아오고 더 이상 호출이 필요하지 않을 때
useEffect(함수)
컴포넌트 최초 생성 때와 props, state가 업데이트 될 때 함수
가 실행된다.
목록 내 필터링을 구현할 때
외부 API를 받아오는 과정에서 side effect를 최소화하기 위해 effect hook을 사용한다.
Hook을 사용하지 않고 네트워크 요청을 하면, 페이지가 멈추거나 깜빡일 수 있다.
useEffect(() => {
fetch(`http://서버주소/url?q=${filter}`)
.then(resp => resp.json())
.then(result => {
setProverbs(result);
});
}, [filter]);
종속성 filter
가 변경될 때마다 외부 API를 받아온다.
외부 API 접속이 느릴 경우 로딩 화면 구현은 필수다.
useState로 로딩의 상태 처리가 필요하다.
fetch 요청 전후로 로딩 상태 변경 함수(true / false)를 설정해주어 보다 나은 UX를 구현한다.
첫 번째 인자 함수
의 return문에는 cleanup
함수를 넣을 수 있다.
cleanup
함수는 말 그대로 뒷정리를 해준다.
두 번째 인자 deps
가 빈 배열일 경우, 컴포넌트가 최초 생성 될 때만 함수
가 호출된다.
deps
가 빈 배열일 경우 컴포넌트가 사라질 때 cleanup
함수가 실행된다.
useEffect 내부에서 사용하는 state와 props를 deps
배열에 넣는다.
요소가 업데이트 될 때마다 함수
가 호출된다.
deps
parameter를 생략하면 컴포넌트가 리렌더링 될 때마다 함수
가 호출된다.