useReactiveVar, makeVar

들어가기
login상태유지, darkmode/lightmode 같이 모든 page에 적용되는 부분을
ture/false로 전체 page에서 접근 및 제어가 가능하게 해 주는 기능

1. src/apollo.js

import { makeVar } from "@apollo/client";

export const isLoggedInVar = makeVar(true)
export const darkModeVar = makeVar(false)

check!!
page전역에서 관리 및 제어하고픈 변수( login, darkmode등)을
src폴더에 apollo.js를 만들어
isLoggedInVar, darkModeVar 같이 뒤에 Var를 붙여서 만든다.

2. src/App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { darkModeVar, isLoggedInVar } from './apollo'
import Home from './screens/Home'
import Login from './screens/Login'
import { useReactiveVar } from '@apollo/client'
import Nomad from './screens/Nomad'
import { ThemeProvider } from 'styled-components'
import { darkTheme, GlobalStyles, lightTheme } from './styles'

function App() {
  const isLoggedIn = useReactiveVar(isLoggedInVar)
  const darkMode = useReactiveVar(darkModeVar)
  
  ///App.js에 isLoggedIn, darkMode를 useReactiveVar를 만든다.
  ///모든 page에서 isLoggedInVar 및 darkModeVar에 접근 가능해짐.

  return (
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
    	///darkMode가 true 혹은 false인가에 따라 rendering되는 mode가 달라짐.
    
      <GlobalStyles />
      <Router>
        <Routes>
          <Route path="/" element={isLoggedIn ? <Login /> : <Home />} />
          ///isLoggedIn이 true 혹은 false인가에 따라 rendering되는 page가 달라짐.
          
          <Route path="/nomad" element={<Nomad />} />
        </Routes>
      </Router>
    </ThemeProvider>
  )
}

export default App

3.useReactiveVar의 사용

src/screens/Home.js 및 src/screens/Login.js

import styled from 'styled-components'
import { darkModeVar, isLoggedInVar } from '../apollo'

const Title = styled.h1`
  color: ${(props) => props.theme.fontColor};
`
const Container = styled.div`
  background-color: ${(props) => props.theme.bgColor};
`

const Home = () => {
  return (
    <Container>
      <Title>Home</Title>
      <button onClick={() => isLoggedInVar(true)}>Log in now</button>
      ///isLoggedInVar에 접근해서 값을  true로 바꿈,
      ///onClick을 사용했을때, 함수로 isLoggedInVar에 접근함.
      
      <button onClick={() => darkModeVar(true)}>darkMode</button>
      ///darkModeVar에 접근해서 값을 true로 바꿈.
      
      <button onClick={() => darkModeVar(false)}>whiteMode</button>
    </Container>
  )
}

export default Home