Codestates SEB FE 42기/정리노트

S2 unit9 | 컴포넌트 내에서의 AJAX요청

2realzoo 2022. 12. 9. 12:17

목록 내에서 필터링이 필요할 때 사용할 수 있는 두가지 방법이 있다.

 

1. 컴포넌트 내에서 필터링

: 서버에서 가져온 데이터를 컴포넌트 내에서 직접 필터링 하는 방식

 

장점 : HTTP요청의 빈도가 줄어듦

단점 : 브라우저의 메모리에 모든 데이터를 갖게 되므로 클라이언트(브라우저)의 부담이 늘어남

 

 

2. 컴포넌트 밖에서 필터링

: 서버에서 데이터를 가져올 때 query parameter를 사용해 필터링 한 상태로 가져오는 방식

 

장점 : 클라이언트가 따로 필터링 구현하지 않아도 됨.

단점 : 서버가 필터링을 처리하므로 서버의 부담이 늘어남.

 

 

useEffect로 fetch 구현 (컴포넌트 밖에서 필터링)

useEftect(() => {
	fetch('url?q={filter}')
    .then(response => response.json())
    .then(result => {
    	setState(result)
        });
     }, [filter]);

로딩화면(loding indicator) 구현

 

const [isLoding, setIsLoding] = useState(false);

useEftect(() => {
	setIsLoding(true);
    fetch('url/q?={filter}')
    .then(response => {response.json()})
    .then(result => {
    	setState(result);
        setIsLoding(false);	
            });
     }, [filter])

// 생략

return (
	<div>
    	{isLoding?
        	<loadingIndicator /> //따로 구현
            : <본문 />
         }
    </div>
    )