[React]Route 조건부 렌더링

Route 조건부 렌더링

Route에서 조건에 따라 컴포넌트를 렌더링 하는 간단한 방법에 대해 설명합니다.

Redirect로 처리하는 방법도 있으나 Redirect로 처리하는 방법은 추후 설명하도록 하겠습니다.

 

아래 코드는 http://localhost:3000/Dashboard로 접속 시 토큰이 존재할 경우 Dashboard 컴포넌트를 렌더링 하며,

토큰이 존재하지 않을 경우 Login 컴포넌트를 렌더링 합니다.

...

function setToken(userToken) {
  localStorage.setItem('token', JSON.stringify(userToken));
}

function getToken() {
  const tokenString = localStorage.getItem('token');
  const userToken = JSON.parse(tokenString);
  return userToken?.token;
}

const App = () => {
  const token = getToken();

  return (
    <Router>
    <div className="App">
      <div className='outer'>
        <div className='inner'>
          <Switch>
            <Route exact path='/' 
                   render={() => <Login setToken={setToken} />}/>
            <Route path='/sign-up' component={SignUp} />
            <Route path='/Dashboard' component={token ? Dashboard : Login} />
          </Switch>
        </div>
      </div>
    </div>
    </Router>
  );
}

export default App;

1. 삼항 연산자 처리

http://localhost:3000/Dashboard로 접속 시 토큰이 존재할 경우 Dashboard 컴포넌트를 렌더링 하며, 토큰이 존재하지 않으면 Login 컴포넌트를 렌더링 합니다.

<Route path='/Dashboard' component={token ? Dashboard : Login} />

2. && 연산자 처리

JSX안에 중괄호를 이용해서 논리 연산자(&&)를 사용합니다.

<Switch>
  <Route exact path='/' 
         render={() => <Login setToken={setToken} />}/>
  <Route path='/sign-up' component={SignUp} />
  {token &&
  <Route path='/Dashboard' component={Dashboard} />
  }
</Switch>

---

잘못된 방법

토큰이 존재하지 않는 경우 path에 따라 Login 컴포넌트 또는 SignUp 컴포넌트를 렌더링 한다고 생각하고 코드를 작성하였습니다.

<Switch>
  {!token &&
  <Route exact path='/' 
         render={() => <Login setToken={setToken} />}/>
  <Route path='/sign-up' component={SignUp} />
  }
  <Route path='/Dashboard' component={Dashboard} />
</Switch>

하지만, 다음과 같은 에러가 발생합니다.

『 Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 』

에러는 2개 이상의 태그를 반환할 경우 발생하는 에러입니다.

<Switch>
  {!token &&
  <>
  <Route exact path='/' 
         render={() => <Login setToken={setToken} />}/>
  <Route path='/sign-up' component={SignUp} />
  </>
  }
  <Route path='/Dashboard' component={Dashboard} />
</Switch>

Fragments(태그를 그룹화)의 단축 문법인 <> ... </> 빈 태그로 그룹처리를 하면, 에러는 발생하지 않습니다.

그러나, 위 코드는 Dashboard path에 대해 조건 처리를 하지 않았으므로 토큰이 없어도 http://localhost:3000/Dashboard로 접속이 가능합니다.

 

간단한 프로젝트인 경우에는 Route 조건부 렌더링을 해도 큰 문제가 없어 보이지만, 처리해야 하는 Route가 많아지고 조건부 렌더링을 해야 되는 경우가 많다면 권장하는 방법은 아닙니다.

참고용으로만 봐주시면 감사하겠습니다.

---

참고

https://stackoverflow.com/questions/50526891/react-router-with-conditions