React - ClassComponent 전역변수

전역변수는 모든 영역에서 사용할 수 있는 변수를 말합니다. 전역변수를 선언하면 코드의 블록, 내부,외부 함수 등의 영역에 상관없이 어디서든 불러와 사용 할 수 있습니다. 

1. 내 코드의 문제점

현재 진행 중인 프로젝트 구조 상 상태관리 라이브러리를 사용하지 않다보니, 개발을 하다가 굳이 state로 관리하지 않아도 되는 데이터들이 있었고, 이러한 데이터들을 자식 컴포넌트에서 사용하기 위해서 계속해서 여러 값들을 내려주다보니 점점 많아져 관리하기도 힘들고 알아보기도 힘들었습니다. 그래서 이러한 데이터들을 쉽게 관리 하고, 하위 컴포넌트에서도 쉽게 사용 가능하도록 개선해보고자 했습니다.

2. 개선

class GlobalJS extends PureComponent {
    //region >> constructor

    constructor(props) {
        super(...arguments);

        this.myGlobal = {}; //전역 변수들을 담을 객체
    }

    componentDidMount = async () => {
        //전역변수 기본값 넣어주기. 
        this.callbackFunction.setGlobal("global1", 1);
        this.callbackFunction.setGlobal("global2", 2);
        this.callbackFunction.setGlobal("global3", 3);
        this.callbackFunction.setGlobal("global4", 4);
        this.callbackFunction.setGlobal("global5", 5);
    }

    callbackFunction = {

        //전역변수 설정
        setGlobal: (key, value) => {
            let obj = {[key]: value};
            this.myGlobal = {
                ...this.myGlobal,
                ...obj
            };
        },
        
        //전역변수 값 가져오기
        getGlobal: key => {
            return this.myGlobal[key];
        },

    }

    render() {
        return (
            <NextInfoz
                callbackFunction={this.callbackFunction}
            />
        );
    }
}

export default GlobalJS;

• 먼저 전역 변수를 담을 객체를 선언합니다. (== this.myGlobal)
• 변수의 키와 값을 받아 전역 변수 객체에 넣어 줄 함수를 만듭니다. (== setGlobal)
• 변수의 키를 받아 해당 키의 값을 리턴하는 함수를 만듭니다. (== getGlobal)
• 사용하고자 하는 변수와 초기값을 정의합니다. (== componentdidMount 내부)
• 하위 컴포넌트로 전역변수 관련 함수를 담고있는 함수만 내려줍니다. (render 부분의 callbackFcuntion)

// 자식 컴포넌트에서 global1 값 사용하기
let globla1 = this.props.callbackFunction.getGlobal('global1'); //= 1

// 자식 컴포넌트에서 global1 값 변경하기
this.props.callbackFunction.getGlobal("global1", 10);
let globla1 = this.props.callbackFunction.getGlobal('global1'); // = 10

• 자식 컴포넌트에서는 위와 같이 사용할 수 있습니다.

위 처럼 this.myGlobal 로 전역변수를 통째로 관리하고 set, get 함수를 통해 전역변수를 설정하고 가져올 수 있도록 하여 관리가 편하고 자식 컴포넌트에서도 쉽게 사용 가능도록 개선했습니다!

 

더 좋은 방법이 있거나, 공부하기가 좋은 사이트가 있다면 추천해주시면 감사하겠습니다~