[React] Local State 사용하기 (Reactive Variables)

Local State란?

LocalStorage에, state값을 저장해서 사용하는 것!

 

Local State의 필요성

처음 사이트에 접속했을때,

LocalStorage에 저장된 값을 이용해 state값을 지정해 줄 수 있다

 

Reactive Variables 란?

아폴로를 이용해, 변수를 전역으로 관리 하도록 해준다.

( 어디서든 변수를 꺼내올 수 있도록 함 )

 

Apollo Client로, reactive variables 만들기

// Apollo.js

import { makeVar } from "@apollo/client"

export const isLoggedInVar = makeVar(false);

 

컴포넌트에서 reactive variables 사용하기

// App.js

import Home from "./screens/Home";

// 만든 reactive variables 가져오기
import { isLoggedInVar } from "./apollo"

// reactive variables 사용할 모듈 불러오기
import { useReactiveVar } from "@apollo/client";

function App() {
  // useReactiveVar() 이용해서, reactive variables "값" 가져오기
  const isLoggedIn = useReactiveVar(isLoggedInVar)
  
  return (
    <div className="App">
      {isLoggedIn ? "LoggedIn" : "LoggedOut"}
    </div>
  );
}

export default App;

 

컴포넌트에서 reactive variables 변경하기

// 만든 reactive variables 불러오기
import { isLoggedInVar } from "../apollo";

const Home = () => {
  return (
      <div>
          <h1>Home</h1>
          // 함수형식으로 사용해, "값"을 바꿀 수 있다.
          <button onClick={()=>isLoggedInVar(false)}>Logout..</button>
      </div>
  )
}

export default Home;

 

React Variables를 Local Storage에 저장

// 만든 reactive variables 불러오기
import { isLoggedInVar } from "../apollo";

// reactive variables 사용할 모듈 불러오기
import { useReactiveVar } from "@apollo/client";

const Store = () => {
  // reactive variables 사용
  const isLoggedIn = useReactiveVar(isLoggedInVar)
  
  // localstorage에 loginVar라는 이름으로 저장
  localStorage.setItem("loginVar", isLoggedIn);
  
  // 버튼 누르면 현재 로그인 상태 알려줌
  return (
      <div>
          <h1>Home</h1>
          <button 
            onClick={() => console.log(localStorage.getItem("loginVar")) }
          >
            is Login?
          </button>
      </div>
  )
}

export default Store;