6. twitter clone 하기 - 라우터 적용하기(2)

1. useState 함수 사용하기

• useState함수로 로그인 여부를 판단하기 위한 상태를 만들때 [isLoggedIn, setIsLoggedIn] = useState(false) 처럼 useState 함수를 사용해서 상태와 상태 관리 함수로 짝을 만들어 사용할 수 있습니다.
  => isLogged 의 값은 setIsLoggedIn 함수만 사용해서 변경이 가능합니다.
• 로그인이 되어 있지 않은 상태일 때 로그인 페이지를 보여주려면 isLoggedIn 상태를 참조해서 렌더링할 컴포넌트를 결정하면 됩니다.
  => isLoggedIn 이 false 이면 로그인 페이지를 보여주는 Auth 컴포넌트, true 일 경우에는 로그인 후 볼 수 있는 Home 컴포넌트를 렌더링 하면 됩니다.

 

• 아래의 코드처럼 Router.js 파일을 수정합니다.

import { useState } from "react"
import { HashRouter as Router, Route, Switch } from "react-router-dom"

const AppRouter = () => {
  const [isLoggedIn, setLoggedIn] = useState(false)
  return <Router>
           <Switch>
             <Route />
           </Switch>
  </Router>
}

export default AppRouter

• const [isLoggedIn, setIsLoggedIn] = useState(false) 코드가 실행되면 isLoggedIn 은 단순히 변수가 아닌 setIsLoggedIn 으로 관리하는 상태로 취급할 수 있습니다.
•  isLoggedIn 의 초깃값은 false 이고, setIsLoggedIn 은 변수가 아니라 isLoggedIn 을 변경할 때 사용하는 함수입니다.
  => setIsLoggedIn(true) 처럼 원하는 값을 인자로 전달하면 isLoggedIn 의 값을 true 로 바꿀 수 있습니다. 이렇게 여러 개의 값을 배열에 한꺼번에 대입하는 문법은 ES6의 구조 분해 할당입니다.

               * 구조 분해 할당 : 구문의 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

2. 삼항 연산자를 이용하여 컴포넌트 반환하기

• 삼항 연산자와 isLoggedIn 을 조합하여 true, false 에 따라 적절한 컴포넌트를 렌더링 하도록 만듭니다.
• 아래와 같이 Router.js 파일을 수정합니다.

import { useState } from "react"
import { HashRouter as Router, Route, Switch } from "react-router-dom"
import Auth from "../routers/Auth"
import Home from "../routers/Home"

const AppRouter = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  return <Router>
           <Switch>
             {isLoggedIn ? <Route exact path="/">
                <Home />  // 로그인이 되어 있으면 Home 을 보여줌
             </Route> : <Router>
                <Auth />  // 로그인이 되어 있지 않으면 Auth 를 보여줌
             </Router>}
           </Switch>
  </Router>
}

export default AppRouter

• exact 는 값으로 true, false 를 줄 수 있습니다. 만약 true 일 경우 exact={true} 대신 exact 만 작성하면 됩니다. exact 는 path 속성에 넣은 경로값이 정확한 URL 의 경로값과 일치할 때만 렌더링 되도록 돕습니다. 만약 exact 를 사용하지 않으면 path="/" 라우터는 /products 경로에서도 반응하게 되기 때문에 이를 방지하고자 사용하게 됩니다.

 

• 아래의 코드로 App.js 파일을 수정합니다.

import AppRouter from "./Router"

const App() => {
  return <AppRouter />
}

export default App

• 마지막으로 isLoggedIn 값이 true 일 경우에 Home 컴포넌트가 렌더링 되는지 확인을 합니다.

// Router.js
(... 생략 ...)
const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(true)
(... 생략 ...)

• 페이지가 false일 때 Auth 였다가 true일 때 Home 이 되는지 확인합니다.

isLoggedIn 이 false 일때

isLoggedIn 이 true 일때

 

 

이 글은 Nomad Coder의 "클론코딩 트위터" 책을 바탕으로 작성되었습니다.