인프런 커뮤니티 질문&답변

export default function (SpecificComponent,option,adminRoute = null) {
    
    function AuthenticationCheck(props) {

        const dispatch = useDispatch();

        useEffect(() => {

            dispatch(auth()).then(response => {
                
                if(!response.payload.isAuth) {

                    if(option) {
                        props.history.push('/login')
                    }

                }

                else {

                    if(adminRoute && !response.payload.isAdmin){
                        props.history.push('/')
                    }
                    
                    else {
                        props.history.push('/')
                    }
                }

                
        })
        
        }, [])
            
            return(

                <SpecificComponent/>
            
                )
            
        
    }

    return AuthenticationCheck
}

요즘 웹에 빠져서 프론트랑 백엔드 강의를 보는데 재밌는 강의 올려주셔서 감사합니다 !!

궁금한 건  예를들어서 로그인이 필요한 페이지에 로그인 없이 접근한다해도 결국 마지막엔 <SpecificComponent/>

이걸 리턴시켜줘서 렌더링이 될거라고 생각을 했는데요

그런데 useEffect라는 함수를 찾아보면 렌더링이 될 때 특정 작업을 수행해주는 함수라고 했고 느리게 잘 보면 

로그인이 필요한 페이지에 로그인 없이 접근할 때 한 0.2초 정도는 잠깐 페이지가 뜨지만  바로 사이트 접근이 안되더라구요 

그래서 useEffect 함수를 사용해서 return을 통해 랜더링을 하고 인증 확인 절차가 가능한 부분이구나 했는데

위에 있는 코드에서 useEffect 함수를 안쓰고 해도 로그인이 필요한 페이지에 로그인 없이 접근이 안되는 건 같아서요

그럼 결국 if문에 있는 props.history.push 코드가 실행이 되면 밑에 return <SpecificComponent/> 까지 코드가 진행이 안되고 바로 넘어가는거라고 이해해야하나요???

제가 아직 자바스크립트에 대한 이해가 부족해서 이상한 질문일수도 있지만 궁금해서 질문해봅니다

감사합니다!!