[React Hooks] useEffect , useCallback 사용법

useEffect

const KaKaoLoginButton = () =>{

    const classes = useStyles();
    const kakao = new Kakao();


    React.useEffect(()=>{ //렌더링 될때마다 작업수행
        
        queryString.parse(history.location.search);

    });
    return (
        <div>
            <Button className={`kakao-button ${classes.kakaoButton}`}
            variant = 'contained'
            startIcon = {<KaKaoLogo/>}
            >
                카카오로 시작하기

            </Button>
            
            </div>
    )
}

useEffect 는 componentDidMount 와 componentDidUpdate 를 합친 형태라고도한다.

1. 렌더가 다된직후 ,

2.상태 업데이트되서 렌더링다시한 직후

에 useEffect를 실행한다. 

그러므로 useEffect 사용하면 같은코드를 componentDidMount 와 componentDidUpdate 를 나눌 필요가없다.

 

 return -> useEffect  -> 업데이트 ->useEffect 

 

useCallback

function HomePage (){

    const onGoAuthMobilePage = React.useCallback(()=>{ //렌더링 최소화

    },[]) //배열 값 바뀌었을 때만 함수를 새로 생성(-> 비어있으면 렌더링 한번만)
    return (
        <div className="home-container">
            <div className="main">
                <div className="description">
                    <The8daysLogo/>
                    XXXX와 함께
                    <br/>
                    나만의 워라밸을 시작하세요!
                </div>
                <div className="social-login-buttons">
                    <KaKaoLoginButton />
                </div>
                <div className="main-footer">
                    <MainFooter/>
                </div>
                
            </div>
            
        </div>
    )
}

export default HomePage;

상태가 변함에따라 return 함수가 리 렌더링 되지만 함수도 다시 렌더링이된다.

useCallback 을 사용하면

첫번째 파라미터로 함수,

두번째로 배열이들어간다.

 

이 배열에 넣어놓은 object의 상태가 변하지 않는 이상 리렌더링 되지 않는다.

React.useCallback(()=>{
	console.log(a)
    },[a])

위와 같은경우 a 의 상태가 변할때만 이 함수를 새로 생성하고 

b나 c 가 변하면 무시한다. 배열에 아무것도 넣지않으면 역시 무시되고 단 한번만 생성한다.