[React] 웹 접속 시 특정 경로 고정 연결 - 로컬 스토리지

웹 페이지에 접속하면 보통 첫 번째 메뉴가 자동으로 선택되어 있는 웹 사이트를 많이 볼 수 있습니다.

이런 식으로 가장 첫 번째 메뉴가 선택(실행)되어 있는 상태로 페이지가 오픈되는 경우가 있습니다.

 

해당 웹 사이트의 메뉴는 사용자가 직접 뉴스 클리핑 그룹을 추가 및 삭제하여 구성된 메뉴입니다.

 

그룹별로 id가 있어서 첫 번째 메뉴의 id는 사용자마다 다를 수 있습니다.

이때 메뉴 가장 첫번째가 웹 사이트가 열리면 고정적으로 선택되어 있는 상태가 되도록 코드를 짜보겠습니다.

 

1. DB에서 사용자의 그룹 키워드를 가져오는 함수에서 가장 첫 번째 id를 따로 추출
2. 첫 번째 그룹 ID를 로컬 스토리지에 저장합니다.
3. 페이지가 다시 로드될 때, 로컬 스토리지에서 저장된 그룹 ID를 가져와 초기 경로를 설정합니다.

 

이렇게 하면 사용자가 웹페이지에 처음 접속하면 첫 번째 그룹 ID로 초기 경로가 설정되고, 그 이후에는 클릭한 그룹 ID가 로컬 스토리지에 저장되어, 새로 고침 하더라도 이전에 선택한 그룹 ID로 라우터가 설정됩니다.

 

먼저 로컬 스토리지 사용 예시를 간략하게 보여드리겠습니다.

 

1. 로컬 스토리지에 데이터 저장

// 데이터를 로컬 스토리지에 저장
localStorage.setItem('username', 'John');
localStorage.setItem('email', 'john@example.com');

 

2. 로컬 스토리지에서 데이터 불러오기

// 로컬 스토리지에서 데이터 불러오기
const username = localStorage.getItem('username');
const email = localStorage.getItem('email');

console.log('Username:', username); // John
console.log('Email:', email); // john@example.com

 

3. 데이터 업데이트하기

// 기존 데이터를 업데이트하려면 먼저 해당 키로 새로운 값을 설정합니다.
localStorage.setItem('username', 'UpdatedJohn');

// 업데이트된 데이터 불러오기
const updatedUsername = localStorage.getItem('username');

console.log('Updated Username:', updatedUsername); // UpdatedJohn

 

4. 데이터 삭제하기

// 로컬 스토리지에서 데이터 삭제
localStorage.removeItem('username');
localStorage.removeItem('email');

// 데이터 삭제 후 불러오면 null이 반환됩니다.
const deletedUsername = localStorage.getItem('username');
const deletedEmail = localStorage.getItem('email');

console.log('Deleted Username:', deletedUsername); // null
console.log('Deleted Email:', deletedEmail); // null

 

로컬 스토리지는 웹 브라우저에서 작은 양의 데이터를 클라이언트 측에 저장할 때 유용한 기능입니다.

예시에서는 간단한 문자열 데이터를 저장하고 불러오는 방법을 보여주었습니다. 

실제 프로젝트에서는 데이터를 보다 구조화된 방식으로 저장하고 관리하는 것이 일반적입니다.

 

 

다시 뉴스클리핑으로 돌아와서 로컬 스토리지를 활용한 메뉴 활성화 관리 코드를 보여드리겠습니다.

import React, { useCallback, useEffect, useState } from 'react';
import NewsHeader from './NewsHeader';
import KeywordGroup from './KeywordGroup';
import { useLocation, useNavigate } from 'react-router-dom';
import { useAuthContext } from '../../context/AuthContext';

export default function NewsSidebar() {
  const navigate = useNavigate();
  const [keywordData, setKeywordData] = useState([]);
  const { user } = useAuthContext();
  const [isLoading, setIsLoading] = useState(true);
  const location = useLocation();
  const path = String(location.pathname);
  const pathSegments = path.split('/');
  const groupid = parseInt(pathSegments[2]);
  const keywordid = parseInt(pathSegments[3]);

  // 첫 번째 그룹 ID 추출 또는 설정
  const firstGroupid = keywordData.length > 0 ? keywordData[0].groupid : null;

  // 페이지가 로드될 때 로컬 스토리지에서 그룹 ID를 가져와 초기 경로 설정
  useEffect(() => {
    const storedSelectedGroupid = localStorage.getItem('selectedGroupid');
    if (storedSelectedGroupid !== null) {
      navigate(`/news/${storedSelectedGroupid}`);
    }
  }, [navigate]);

  // 그룹 ID를 로컬 스토리지에 저장 (첫 번째 그룹 ID 또는 사용자가 선택한 그룹 ID)
  useEffect(() => {
    if (firstGroupid !== null) {
      localStorage.setItem('selectedGroupid', firstGroupid.toString());
    }
  }, [firstGroupid]);

  // ... 나머지 코드 ...
  
  return (
    <div className='h-full min-w-[250px] p-3 border-r border-slate-900/10 dark:border-slate-50/[0.06] select-none'>
      <div>
        <NewsHeader />
        {keywordData.map((keyword, index) => (
          <KeywordGroup
            key={index}
            groupname={keyword.groupname}
            groupid={keyword.groupid}
            keywordid={keywordid}
            uid={user.uid}
            onRemove={() => handleRemoveGroup(keyword.groupname)}
            isOpen={openedGroupId === keyword.groupid}
            onToggleDropdown={() => toggleGroupDropdown(keyword.groupid)}
          />
        ))}
      </div>
    </div>
  );
}

 

감사합니다.