리액트의 Side Effect, 로그인 데이터를 로컬 스토리지에 저장하고 삭제하는 방법

 

사이드 이펙트 = 이펙트 Side Effect

 

리액트의 주요 임무

1. UI를 렌더링 하는 것. 사용자 입력에 반응하여 필요할 때 UI를 다시 렌더링 하는 것이다. 
2. 사용자 입력에 따른 반응 화면에 보이게 하기

 

그렇다면 리액트의 사이드 이팩트는??

주요 임무 외의 모든것!

ex) http 리퀘스트를 보내는 것 or 브라우저 저장소에 무언가를 저장하는 것 or 타이머 간격 조정하는 것

 

사이드 이펙트는 직접적으로 컴포넌트 함수에 들어가서는 안된다. 그 이유는 버그나 무한 루프가 발생할 가능성이 높기 때문이다. 또는 http 리퀘스트가 너무 많이 보내질 수도 있다. 

 

그래서 사이드 이팩트를 핸들링하는 훅을 사용하는 것이다. 그게 바로 useEffect이다. 

useEffect(()=> {}, [dependencies]);

useEffect는 두개의 인수로 받는데, 첫번째는 함수이다. 모든 컴포넌트 평가 후에 실행되어야 하는 함수이다. 

그리고 두번째 인수는 지정된 의존성이다. (의존성으로 구성된 배열이다. )

 

의존성이 변경될 때마다 첫 번째 함수가 다시 실행된다. (컴포넌트가 다시 렌더링될 때는 실행되지 않는다.)

 

그래서 함수에 어떤 사이드이펙트 코드라도 넣을 수 있다. 

 

 

---

 

애플리케이션을 다시 로드할 때 전체 리액트 스크립트가 다시 시작된다. 그래서 가장 최근 실행에서 얻은 모든 변수는 사라진다. 웹, 스크립트, 브라우저는 그런 식으로 작동한다. 

 

다시 시작할 때 모든 데이터가 사라진다면 어딘가에 저장하는 것이 좋다. 다시 시작해도 유지되는 곳에!

이보다 더 좋은 방법은 이 앱이 시작될 때마다 데이터가 유지되었는지 확인하는 것이다. 그렇다면 자동으로 사용자를 다시 로그인시킨다. 

==>>> useEffect를 사용하자!

 

브라우저에 우리가 사용할 수 있는 저장소 중에 하나는 쿠키와 로컬 스토리지이다. 작업하기 쉬운 로컬 스토리지부터 사용해보자!

브라우저에 내장된 저장 매커니즘은 리액트와 아무 상관없다. 

 

로그인할 때 유저 정보를 저장하고 싶을때는, 자주 일어나는 일도 아니고, 무언가를 저장하고 싶을 때만 실행되는 거다. 그래서 여기에는 useEffect 를 반드시 쓸 필요가 없다. 

 

하지만 앱이 다시 시작되는 경우라면(유저가 페이지를 떠났다가 다시 돌아오는 경우 or 단순히 페이지를 새로고침하는 경우) 그러면 로컬 저장소에 키-값이 있는지 확인하면 된다. 

 

앱이 다시 시작되면 App 컴포넌트 함수는 다시 실행된다. 따라서 당연히 이 함수에서는 로컬 스토리지에 연결할 수 있다. 

 

localStorage.setItem("isLoggedIn");

App 컴포넌트 전역에서 "isLoggedIn" 를 검색하면 거기에 저장된 항목이 반환된다.

 

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn");
  if (storedUserLoggedInInformation === "1") {
      setIsLoggedIn(true);
  }
  
 ...

그래서 👆위 와 같이 코드를 짠다면 단점 => 무한 루프를 만들 수도 있다. 

왜냐하면

storedUserLoggedInInformation === "1"

가 저장되어 있는지 확인하고 저장되어 있으면

setIsLoggedIn

를 true로 설정한다. 그리고 state 설정 함수를 호출할 때마다 컴포넌트는 다시 실행된다. 이런 식으로 계속된다. ==>> 그래서 useEffect를 사용해야 한다. 

 

그러면 언제 실행될지 제어할 수 있다!!

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn");
    if (storedUserLoggedInInformation === "1") {
      setIsLoggedIn(true);
    }
  }, []);
...

그래서 👆위 와 같이 코드를 짠다면 아래의 함수는 컴포넌트 함수에서 직접 실행되는게 아니고 리액트에 의해 실행된다. 

모든 컴포넌트 재평가 후에 실행된다. 

 

즉, App 컴포넌트 함수가 실행된 후에 아래 함수가 실행되고, 그런 다음 setIsLoggedIn(true); 와 같이 state를 업데이트하면 컴포넌트가 다시 실행된다. 

 

 const storedUserLoggedInInformation = localStorage.setItem("isLoggedIn");
    if (storedUserLoggedInInformation === "1") {
      setIsLoggedIn(true);
    }

 

그런데 모든 컴포넌트 평가 후에 실행되는 것은 아니고, 의존성이 변경된 경우에만 실행된다. 

 

App 컴포넌트 함수가 처음으로 실행되다면 의존성이 변경된 것으로 간주된다. 왜냐면 의존성이 없었기 때문에!

 

---

의존성 배열이 [] 빈칸이면 의존성이 없기 때문에 앱이 시작될 때 한 번만 실행된다. 그 이후로 의존성은 절대 변경되지 않기 때문이다. 

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn");
    if (storedUserLoggedInInformation === "1") {
      setIsLoggedIn(true);
    }
  }, []);
...

위의 의미

앱이 시작되면 useEffect 안의 코드가 실행된다. 그리고 setIsLoggedIn에서 state가 업데이트된다. 그리고 컴포넌트 함수가 다시 실행되도록 트리거된다. 그래서 App 안의 코드가 전부 다시 실행되고, JSX 코드가 평가되고, DOM이 그에 따라 업데이트된다. 그 후, effect가 다시 실행되는데, 의존성이 변경된 경우에만 다시 실행된다. 여기서는 그렇지 않다. 

 

 

---

로그아웃 버튼 클릭시 로컬 스토리지에서 데이터 지우기

 

 const logoutHandler = () => {
    localStorage.removeItem("isLoggedIn");
    setIsLoggedIn(false);
  };

로그아웃 버튼을 클릭할 때마다 다시 로컬 스토리지에 가서 "isLoggedIn" 키를 제거한다. 

 

 

---

전체 코드

import React, { useState, useEffect } from "react";

import Login from "./components/Login/Login";
import Home from "./components/Home/Home";
import MainHeader from "./components/MainHeader/MainHeader";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn");
    if (storedUserLoggedInInformation === "1") {
      setIsLoggedIn(true);
    }
  }, []);

  const loginHandler = (email, password) => {
    // 여기에 로컬 저장소를 실행해보자
   
    localStorage.setItem("isLoggedIn", "1"); // setItem은 브라우저에서 사용할 수 있는 전역 객체이다. 여기에 아무 식별자를 넣을 수 있다. 로그인했다 1, 안했다 0
    setIsLoggedIn(true);
  };

  const logoutHandler = () => {
    localStorage.removeItem("isLoggedIn");
    setIsLoggedIn(false);
  };

  return (
    <React.Fragment>
      <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </React.Fragment>
  );
}

export default App;

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓