목록 내에서 필터링이 필요할 때 사용할 수 있는 두가지 방법이 있다.
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>
)
'Codestates SEB FE 42기 > 정리노트' 카테고리의 다른 글
S2 unit10 | Express vs Node.js 서버 제작 방법, 미들웨어란? (0) | 2022.12.15 |
---|---|
S2 unit10 | web server : SOP, CORS (0) | 2022.12.14 |
S2 unit9 | Eftect Hook : Side Effect 제어 (0) | 2022.12.08 |
S2 unit9 | State 끌어올리기 (0) | 2022.12.07 |
S2 unit8 | [HTTP/네트워크] REST API, OPEN API & API Key (0) | 2022.12.06 |