useEffect(1)

Siwoo Pak·2021년 6월 18일
0

React

목록 보기
12/14
  • 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번 출력하게 되는 걸 볼 수 있다.
profile
'하루를 참고 인내하면 열흘을 벌 수 있고 사흘을 참고 견디면 30일을, 30일을 견디면 3년을 벌 수 있다.'

0개의 댓글