[react] state를 활용하여 로그인 유무에 따라 ui 변경

별로 대단한 기능은 아니지만 구글링하면 구버전 react로 구현된 예시만 있고 최신 프로젝트에서 참고하기는 어려웠다.

보통 웹사이트에서 우리가 로그인하면 로그인 및 회원가입 페이지로 이동되는 ui나 버튼, 링크 등을 안보이게 처리한다.

만들고 있는 쇼핑몰 사이트에 해당 기능을 적용시키기 위해 구현해 보았다.

 

이보다 더 좋은 방법이 있을 것이라 생각되고, 초급 수준 개발자이니 참고만 하길 바란다.

 

1. reducer 세팅

우선 내가 만들고 있는 프로젝트는 reducer를 사용하여 상태를 업데이트하는 로직들을 만들어놓았다.

 

const initialState = {
    isLoggedIn:false
}
 
export default function(state = initialState, action) {
    switch(action.type) {
        case LOGIN_USER:
        return {...state, loginSuccess: action.payload}
        break;
        case SIGNUP_USER:
            return {...state, signup: action.payload}
        break;
        case AUTH_USER:
            return {...state, isLoggedIn:action.payload.isAuth, userData: action.payload}
        break;
        default:
            return state;
    }
}

 

페이지를 랜더링할때 가장 먼저 불러오는 state인 initialState에 로그인 상태를 체크할 값을 만들고,

기본값을 false로 설정했다. 

 

여기서 AUTH_USER의 action이 발생하면 inLoggedIn 값이 true로 변하게끔 해주었다.

true로 절대값을 박아버리면 안되는 것이,

로그인이 풀린 상태에서는 AUTH_USER의 action이 실행되기만해도 값이 true가 되어버린다.

 

2. Auth 미들웨어를 활용한 라우터

이 프로젝트에서는 hoc/auth.js 통해 모든 페이지마다 auth action이 실행되게 설정되어있다.

auth를 통해 로그인된/ 안된 유저가 접근할 수 있는 페이지를 구별해야하기 때문이다.

app.js의 라우터 부분을 보면 이해가 빠를 것이다.

 

   <Route path='/user/login' component={Auth(Login, false)} />
   <Route path="/user/signup" component={Auth(Signup,false)}></Route>

 

모든 페이지에 auth라는 action 실행되면서, auth 미들웨어가 실행되는데, 웹 토큰 값을 가져와서 복호화하면서,

로그인한 userData가 없을 때는 json으로 isAuth에 false값을 보내온다. 

 

반대로 로그인에 성공하면 백엔드 서버에서 isAuth값을 true로 반환하도록 되어있다.

나는 server.js에서 해당 값을 반환하도록 해두었다.

 

결론적으로 로그인 유무에따라 바뀌는 state를 활용하여 삼항식으로 ui가 바뀌도록 한 것에 불과하다.

 

function Navmenu(props) {
 
  const isLogged = useSelector(state=>state.user.isLoggedIn);
  
  return(
          <div>
          {isLogged == false ? <a href="/user/login" className='linkNone'>로그인</a> : null}
          {isLogged == false ? <a href="/user/signup" className='linkNone'>회원가입</a> : null}
          </div>
    )
  }
  
 export default withRouter(Navmenu);