TIL

배상건·2022년 2월 27일
0

TIL

목록 보기
4/15

서버에서 정렬한 데이터 받아오기

Q1. 웹 브라우저에서 데이터를 정렬하는 것이 아니라,
서버에서 정렬한 데이터를 받아오려면 어떻게 하면 될까?

정답 : useEffect

useEffect를 사용해서 정렬값이 변경될 때마다, 서버에서 데이터를 받아오도록 설정한다.

useEffect(콜백, Array)

콜백 : React가 비동기로 실행할 함수
배열 : dependency list

useEffect를 호출하면, 리액트는 즉시 콜백함수를 실행하는 것이 아니라,
콜백함수를 예약 해놓고, 렌더링이 끝나고 나면 콜백함수를 실행해준다.
이때 두번째 아큐먼트로 지정된 dependency list를 함께 기억하게 된다.

const handleLoad = async (orderQuery) => {
	const { reviews } = await getReviews(orderQuery);
    setItems(reviews);
};

useEffect(() => {
	handleLoad(order);
}, [order]);
  1. useEffect 함수의 첫번째 아규먼트인 콜백함수 실행
    콜백함수를 실행하면, 함수 스코프 내의 handleLoad() 가 실행된다.
    콜백에 의해 실행된 handleLoad 함수는 setItems 함수를 실행시켜, items State를 변경시킨다.
    리액트는 state가 변경되면 다시 렌더링이 시작된다.

  2. 다시 렌더링 시작 -> 컨포넌트 함수 실행 -> useEffect 함수 실행 -> 콜백 실행??
    앞서 우리는 useEffect의 콜백함수를 실행하면서 dependency list도 함께 기억된다고 언급했다.
    useEffect가 다시 실행한 현시점에서 dependency list를 이전 시점에서 기억한 dependency list와 비교를 수행한다.

    현시점 dependency list과 이전 시점 dependency list를 비교하여 서로 다른 경우에만, useEffect의 콜백함수를 실행한다.

정리

useEffect는 아규컨트로 콜백과 dependency list를 전달받으며,
React는 콜백함수와 dependency list를 기억해놓고,
처음 렌더링이 실행되면 콜백함수를 실행하고,
그 이후 렌더링에서는 dependency list에 있는 값들의 변경이 있을 때만, 콜백함수를 싱행한다.

이렇게 useEffect를 사용하면,

1) 처음 렌더링 했을 때, 코드를 실행하거나,

2) 특정 값이 바뀔 때마다, 코드를 실행할 수 있다.

profile
목표 지향을 위해 협업하는 개발자

0개의 댓글