- side effect를 사용하고 싶을때, useEffect를 사용.
- useEffect에 전달된 함수는 화면에 렌더링이 완료된 후에 수행함.
- 이와는 다르게 useLayoutEffect()는 모든 DOM이 변경 후에 동기적으로 발생.
const [SubscribeNum, setSubscribeNum] = useState(0);
const [IsSubscribed, setIsSubscribed] = useState(false);
const subscribeVars = {
userTo: userTo,
userFrom: userFrom
};
useEffect(() => {
Axios.post("/api/subscribe/subscribeNumber", subscribeVars).then(
(response) => {
if (response.data.success) {
setSubscribeNum(response.data.subscribeNumber);
} else {
alert("구독자 수의 정보를 가져오지 못했습니다.");
}
}
);
Axios.post("/api/subscribe/subscribed", subscribeVars).then((response) => {
if (response.data.success) {
setIsSubscribed(response.data.subscribed);
} else {
alert("구독 여부 정보를 가져오지 못했습니다.");
}
});
});
- 우선 초기의 값들로 렌더링 된 후에 useEffect의 함수가
적용되고 구독자의 수와 자기가 이 영상을 구독했는지 여부를 서버에서 처리하고 결과값을 클라이언트에서 각각의 state 저장후에 리렌더링된다.
- 그래서 콘솔로그로 state값들을 찍어보면 먼저 초기값으로 렌더링 1번, 그리고 useEffect로 리렌더링 되서 또 1번 출력하게 되는 걸 볼 수 있다.