Route 제한적 접근 HOC관리

/hoc/Register_AG_2_Restrict.j

import React from 'react';
import {useSelector} from 'react-redux';

export default function(RegisterAG2stepComponent){
    function CheckGoTo2step(props){
        const user = useSelector(state => state.user);
        if(!user.agreeSave/* .agreeUsage && !user.agreeSave.agreePersonal */){
            alert('잘못된 경로로 접근하셨습니다.')
            props.history.push('/register_agmall');
        }
        return <RegisterAG2stepComponent {...props} />
    }
    return CheckGoTo2step
}

 

/App.js

import Register_AG_2_restrict from '../hoc/Register_AG_2_restrict'

function App() {
  return (
      <div style={{minWidth:"1200px", margin:"0 auto", overflow:"auto"}}>
        <Switch>
          <Route exact path="/Register_AGmall_2step" component={Register_AG_2_restrict(Register_AGmall_2step)}/>
        </Switch>
      </div>
  );
}

export default App;

 

*AG 1단계 => user.agreeSave.agreeUsage=true, user.agreeSave.agreePersonal=true 정보를 store에 저장

*AG 2단계 => useEffect에서 위 2개 정보를 각각 ''로 변경(dispatch로 variable=...''값을 전송)

 

=> user.agreeSave가 !이면 잘못된 경로 메세지 전송

 

 

※ error

if( user.agreeSave.agreeUsage==='') 로 조건을 걸었을 때 property를 찾을 수 없다는 오류가 발생.

=>user는 store, agreeSave는 action명 중에 하나이나, agreeUsage는 전달 변수 이기 때문에 아예 존재하지 않을 때도 있다.

=>따라서 변수가 아닌 store, action 명으로 조건을 걸어야 할 것으로 판단됨.

 

 

해결 : if ( user.agreeSave && user.agreeSave.agreeUsage === '')

user의 agreeSave(action명 등 탐색가능한 요소)가 있는지 체크하고 && 그 하위 변수의 상태를 체크한다.