useEffect 활용하기

useEffect 조건부 랜더링

const FetchDate = () => {
	const [isLoading, setIsLoading] = useState(true);
  	const [isError, setIsError] = useState(false);
  	const [user, setUser] = useState(null);
  
  
  	//당연한 소리겠지만 민약에 return을 하게 되면 더이상 밑의 코드가 실행되지 않기 때문에 아래 useEffect는 실행되지 않습니다!
  	if(isLoading){
    	return <h2>Loding...</h2>;
    }
  
  	//최초 랜더링때 fectch data 불러오기
  	useEffect(()=>{
    	const fetchUser = async() => {
        	try{
            	const resp = await fetch(url);
              	//fetch에서는 404를 에러로 판단하지 않음..
              	if(!resp.ok) {
                	setIsError(true);
                  	setIsLoading(false);
                  	return;
                }
              	const user = await resp.json();
              	setUser(user);
            } catch (error) {
            	setIsError(true);
            }
        	setIsLoading(false);
        }
        fetchUser();
    }, []);
  
  	//조건부 랜더링
  	if(isLoading){
    	return <h2>Loding...</h2>;
    }
  	if(isError){
    	return <h2>There was an error...</h2>;
    }
  
  	//일반적인 return(조건에 걸리지 않을때!)
  	return (
    	<section>
        	<h2>{user.name}</h2>
      	</section>
    )
}

mounted, unmounted 일때 함수 실행

기본 예제

const ToggleButton = () => {
	const [toggle, setToggle] = useState(false);
  
  	return (
    	<div>
        	<button onClick={()=>setToggle(!toggle)}>
              toggle component
        	</button>
        	{toggle && <RandomComponent />}
      	</div>
    );
}

const RandomComponent = () => {
  	//useEffect에 의존성 배열은 빈 배열로 주면 최초 랜더링될때만 함수가 실행된다.
	useEffect(()=>{
      	const intId = setInterval(()=>{
          	console.log('hello from interval');
        }, 1000);
      
      	//useEffect 내부에서 리턴한 콜백은 언마운트시 실행된다.
      	return () => {
        	clearInterval(intId);
        }
    }, []);
  
  	return <h1>Random Component</h1>;
}

export default ToggleButton;

window eventListner

const RandomComponent = () => {
	useEffect((()=>{
    	const someFunc = () => {
        	...
        }
        //만약 이벤트 등록만 하게 되면 해당 함수가 계속해서 쌓기게 된다.
        window.addEventListner('scroll', someFunc);
        //그렇기 떄문에 unmounted 할때 반드시 remove 해줘야 한다.
        window.removeEventListner('scroll', someFunc);
    }), []);
      
    return <h1>hello</h1>;
}

Docs 읽어보기

https://react.dev/learn/you-might-not-need-an-effect