단아산보

리액트에서 페이지 로드 후 바로 실행하기 위해서는 useEffect 에 정의해 준다. vue나 일반적인 javascript 라면 mouted, ready 에 선언해야 할 부분을리액트에서는 useEffect 로 함수마다 정의해도 되고 함수를모아서 호출하는 방식도 가능하다. 

아래 예시는 api 호출 후 바로 버튼을 숨김처리 하는 예시다. 사용자 입장에서는 화면에 진입했을때 api 호출 후 나오는 부분이라 페이지에서 바로 확인이 가능하다.   

import React, { useEffect, useState, useCallback } from 'react';

const YourComponent = () => {
  const [isButtonDisabled, setIsButtonDisabled] = useState(true); 

  const user_seq = 'your_user_seq'; // 사용자 시퀀스
  const cont_seq = 'your_cont_seq'; // 콘텐츠 시퀀스

  const checkUserPlay = useCallback(() => {
    get(`/content/userAgeChk?user_seq=${user_seq}`)
      .then((response) => {
        if (response.messageCode === 200) {
          const { cnt } = response.data;
          if (cnt > 0) {
          	setModalReview(true);
          } else {
          	setModalCheck(true);
          }
        }
      })
      .catch((error) => console.error(error));
  }, [user_seq, cont_seq]); // 의존성 배열에 필요한 값 추가

  useEffect(() => {
    checkUserPlay();
  }, [checkUserPlay]); // 의존성 배열에 checkUserPlay 추가

  return (
    <div>
      <button disabled={isButtonDisabled}>버튼 텍스트</button> 
    </div>
  );
};

export default YourComponent;