[JavaScript/React] 여러 화면에서 공통함수 사용하기

LocalStorage 에 입력한 user_id 를 서버 단의 유효시간과 동일하게 하기 위해 아래와 같은 형태로 아이디, 만료시간을 등록하였다.

{"value":"sylee","expireTime":1735917224128}

 

 

이 방법의 단점은 해당 localStorage 의 데이터에 접근하기 위해서는 아래 함수를 통해 JSON.parse 후 값을 꺼내줘야 한다는 거다.

 const getUserId = (key) => {
        const item = localStorage.getItem(key);
        if (!item) return null;

        const {value, expireTime} = JSON.parse(item);
        return value;
}

 

 

LocalStorage 에 접근하는 화면이 많은데, 모든 화면에 해당 함수를 붙여넣으면 개발도 힘들 뿐더러, 관리도 힘들 것 같았다.

회사에서 개발자가 공통 함수로 개발하여 모두가 끌어다 사용하는 경우가 있었는데, 여기서도 가능하지 않을까 싶었다.

다만, 어떻게 하는지는 몰라 여러 서치와 테스트를 통해 성공했다.

 

공통 함수를 저장할 Common.js 파일을 생성해준다. 위치는 pages 밑에 해줬다. 꼭 이 위치가 아니어도 접근만 가능하면 될 것 같다.

 

export function 을 사용해 function 을 작성한다.

// localStorage 에 저장된 user_id 의 값 가져오기
export function getIdFromLocalStorage(){
    const item = localStorage.getItem("user_id");
    if (!item) return null;

    const {value, expireTime} = JSON.parse(item);
    return value;
}

 

 

놀랍게도, 이러면 끝이다 !

 

필요한 화면에서 가져다 쓰면 된다.

// 상세 그룹 평균 출석율
    const getGroupAttendance = async (group_id) => {
        console.log("getAttendance");
        axios.get('http://localhost:8080/joinedgroup/detailGroupAttendance', {
            params: {
                user_id: getIdFromLocalStorage(),
                group_id : group_id
            }
        })
            .then (response => {
                if (response.status === 200){
                    console.log(response.data)
                    setContent(response.data)

                }
            })
    }

 

 

user_id 부분에 getIdFromLocalStorage() 를 입력해준다.

그러면 아래와 같이 노란줄이 뜨면서 import 하라는 안내 메세지가 나온다.

 

 

 

import 하겠다고 하면 상단에 이렇게 나타난다.

import {getIdFromLocalStorage} from "../../Common";

 

 

개발 툴이 달라 나타나지 않는다면, 직접 위와 같은 형태로 import 해주면 된다.

경로가 상대적이라 가능하면 자동 import 기능을 사용해 주는 것이 편하다.

 

 

끝 !!