[React] setState()를 이용해 변수를 State처럼 사용하기

사용이유

가변성이 큰 객체를 생성할 때 state로 하나하나 지정해주면 너무 state변수가 많아지고 불필요해짐

따라서 변수를 초기화시키면서 배열로 동적 생성시킬 방법인데 setState를 이용해 편법처럼 사용하는것임

 

 

 

사용방법

1. 전역 변수로 변수를 선언 (class(comp) 바깥쪽)

let timeStrDate = [];

 

2. 변수들을 배열에 넣어줌

getDate = (num) => {
    timeStrDate = [];

    for(var i=0; i<6; i++){
        timeStrDate.push(num);
    }
    this.setState({isLoading: false});
}

여기서 가장 중요한 부분은 this.setState({isLoading: false}); (정말 setState를 하려고 부른게 아님)

변수값이 변경되었지만 state가 아니기 때문에  값이 변하지 않음

따라서 변수를 Rerendering하기위한 방법으로 setState()함수를 호출한 것

 

3. componentDidMount()함수로 한번 먼저 호출해줌

너무나도 당연한 말이지만 그래야지 배열과 값들이 생성되어서 들어갑니당

 

4. 생성한 전역변수는 render문에서 아래와 같이 사용가능함

render(){
    const timeDate = timeStrDate.map(
        (date) => (
            <>
                <div className='ScheduleDateBox'>
                    {date}
                </div>
            </>
        )
    )
    
    ...
    
    <div>{timeDate}</div>
}

 

 

5. 이제 getDate()를 호출하면 변수가 state처럼 동적으로 변함!