React, JavaScript를 통해서 Class와 메소드들 간단하게 사용하기

공통적으로 사용하는 변수들을 매번 파일들에 전역변수로 두고 사용하기는 번거로운 것 같아서

따로 JS파일로 둬서 사용하려고 합니다. 아주 간단하게 작성하겠습니다.

export class DataNames{
    constructor() {
        this.localUserDataName = “localUserDataName”;
        this.localAdminDataName = “localadminDataName”;
        this.localSellerDataName = “localsellerDataName”;
    }
 
    getLocalUserDataName = ()=>{
        return this.localUserDataName;
    }
 
    getLocalAdminDataName = ()=>{
        return this.localadminDataName;
    }
 
    getSellerDataName = ()=>{
        return this.localsellerDataName;
    }
}
 
export const creationData = (data,dataname)=>{
 
    var encryptedData = CryptoJS.AES.encrypt(JSON.stringify(data), key).toString();
   
    localStorage.setItem(dataname, encryptedData);
}
 
export const returnDATA = (dataname)=>{
 
    // 저장된 데이터 가져오기
    const storedData = localStorage.getItem(dataname);
 
    if(!!storedData){
 
        // 데이터 복호화
        const bytes = CryptoJS.AES.decrypt(storedData, key);
        var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
   
        return decryptedData;
    }
 
    return null;
}
 

두 가지 접근방식으로 코드를 간단하게 만들었습니다. 하나는 클래스를 생성해서 생성자를 만들고

함수로 접근,

다른 하나는 단순 함수를 export해서 하나씩 불러오기

이렇게 만든 코드는 아래처럼 사용 가능합니다.

 import {

  creationData,
  returnDATA,
  DataNames,
} from "../../commonFuntions/CommonEncryption";
 
const dn = new DataNames();
 
console.log(dn.getLocalUserDataName());
 
const userdata = returnDATA(dn.getLocalAdminDataName());

이처럼 클래스는 생성자를 통해 값을 초기화해주고 접근합니다.