useEffect

의미

💡 React의 함수 컴포넌트는 props가 입력, JSX Element가 출력으로 순수 함수로 작동하는데, AJAX 등을 사용하는 경우 발생하는 Side Effect를 다루기 위한 Effect Hook

📗 Pure Function vs Side Effect

Side Effect 함수 내의 구현이 함수 외부에 영향을 끼치는 경우
예) fetch를 사용해서 API정보를 가져오거나 이벤트로 DOM 조작할 경우

순수 함수 함수의 입력만이 함수의 결과에 영향을 주는 함수

실행

📗 언제?

-컴포넌트 생성 후 처음 화면에 렌더링될 때(표시)
-컴포넌트에 새로운 props가 전달되며 렌더링
-컴포넌트의 state가 바뀌며 렌더링

📗 주의

최상위에서만 호출
반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안됨
(여러번 호출해도 항상 동일한 순서로 호출하기 위해)

React 함수 내에서만 호출
일반 JS함수 내에서 호출하면 안됨

📗 조건부 effect 발생
첫번째 인자는 함수(여야 함), 두번째 인자는 종속성 배열

두번째 인자
boolean이 아님
어떤 값의 변경이 일어날 때를 의미
배열에는 어떤 값의 목록이 기입됨

useEffect(() => {
	fetch(`http://serverAddress.com/item?q={filter}`)
  	.then(response => response.json())
  	.then(data => {
    	setItem(data);
    });
}, []);

✅ 컴포넌트가 처음 생성될 때만 실행
✅ HTTP 요청 빈도를 줄여 컴포넌트 내부에서 처리하여 클라이언트의 부담 증가

useEffect(() => {
	fetch(`http://serverAddress.com/item?q={filter}`)
  	.then(response => response.json())
  	.then(data => {
    	setItem(data);
    });
}, [filter]);

✅ filter가 바뀔 때마다 실행
✅ 클라이언트가 필터링 구현 생각 필요없이 컴포넌트 외부에서 처리하여 서버 부담 증가

참고

코드스테이츠 교과서
Hook의 규칙