[React] localStorage를 이용한 유저별 데이터 가져오기

[EZ_Scheduler] - [React, Express] 일정 추가 페이지 제작(GET, POST 구현)

[React, Express] 일정 추가 페이지 제작(GET, POST 구현)

이전 개발 일지 읽어보기!

📌회원가입 페이지 제작

안녕하세요, 대학생 개발자 주이어입니다!

오늘은 로그인한 유저에 따라 다른 데이터를 보여주는 것을 구현해보려고 합니다!

재미있게 읽어주세요!

---

✅프로젝트 목표

1. localStorage로 로그인한 유저 ID 저장하기
2. 저장된 유저 ID를 기반으로 데이터 가져오기

ℹ️기술 스택

• 프론트엔드 : Html, Css
• 백엔드 : Node.js
• 프레임워크 : React.js, Express.js
• 데이터베이스 : MySQL
• 빌드도구 : Vite

---

1. localStorage에 유저 ID 저장하기

const loginedUserId = useRef("");

먼저 App.jsx에서 loginedUserId라는 변수를 useRef를 사용하여 만들어주었다. 그 후 context로 다른 컴포넌트에서 변수를 사용할 수 있도록 해주었다. 

const onClickLogin = () => {
    const temp = userdata.filter(
      (item) => item.userId === userId.current && item.userPw === userPw.current
    );
    if (temp.length === 1) {
      loginedUserId.current = userId.current;
      localStorage.setItem("loginedData", loginedUserId.current.current);
      nav("/Home", { replace: true });
    } else {
      window.alert("로그인에 실패했습니다.");
    }
  };

그리고 Login.jsx에서 로그인을 할 때 입력한 userId가 loginedUserId에 저장되도록 해주었다.

그 후 localStorage를 이용하여 웹 자체 서버에 현재 로그인된 유저의 ID를 저장 해주었다.

---

2. 유저별로 다른 데이터 가져오기

const storageData = localStorage.getItem("loginedData");
  loginedUserId.current = storageData;
  console.log(storageData, loginedUserId.current);
 
  const filteredScheduleData = scheduleData.filter(
    (item) => item.userId === loginedUserId.current
  );
 

ScheduleList.jsx에서 localStorage.getItem을 이용하여 웹 서버에 저장된 로그인된 userId를 가져와주었다. 그 후 scheduleData에 저장된 모든 일정에서 로그인된 userId와 일치하는 일정 데이터만 가져와 렌더링 해주었다. 이렇게 해주면 로그인한 userId에 따라 다른 일정 데이터를 보여줄 수 있다. 또한 웹 서버에 userId를 저장해두면 새로고침을 했을 때도 데이터가 남아있기 때문에 다시 로그인할 필요 없이 그대로 서비스를 이용할 수 있다는 장점이 있다. 

(사진)

위 사진을 보면 알 수 있듯이 로그인한 유저에 따라 다른 일정이 보여지는 것을 알 수 있다.

---

실습 마무리

오늘은 localStorage를 이용하여 로그인된 userId를 저장하고 저장된 userId를 이용하여 일정 데이터를 분류하여 렌더링하는 것 까지 구현해 보았습니다. 처음에 어떤식으로 해야할지 고민하다가 localStorage 방법을 떠올렸는데 이게 실무에서 쓰이는 방법인지는 잘 모르겠습니다... 다음에 이와 관련된 내용을 제대로 찾아볼 예정인데 그래도 직접 방법을 떠올려서 만들었다는 점에서 의미가 있다고 생각합니다. 다음에는 일정 세부 페이지를 만들 예정입니다. 다음 일지도 기대해주세요!

[EZ_Scheduler] - [React] 일정 세부 페이지와 Modal Popup 만들기

[React] 일정 세부 페이지와 Modal Popup 만들기

다음 개발 일지 읽어보기!