211124 개발기록: 조건을 걸어 상태 조작하기

read 프로퍼티 부분에서 resolve() 메소드를 통해 그리드에 들어갈 데이터를 읽어들인다.

데이터는 state 로 관리되며, 현재는 더미 데이터라 해당 컴포넌트에서 배열 형태로 곧바로 가져온다. (추후에 api 호출할 예정)

 

문제
최초 렌더링시  탭(tab)의 조건에 맞는 데이터만 출력되는 것이 아닌, 모든 데이터가 쏟아져나온다. (= 즉 최초 렌더링 시에는 필터가 적용되지 않았다.)

7행의 데이터가 모두 나온다.

 

 

 

하지만 기획자가 원하는 것은, 최초 렌더링시에도 조건에 맞는(=미전송) 데이터를 보내는 것.

 

jsx 부분에서 조건을 걸어 쉽게 처리할 수 있을거라 생각했는데, 회사 자체 프레임워크 구조상, 탭이 변경될 때마다 그리드 초기화 로직이 함께 돌아버린다. 즉 탭이 변경될 때마다, '미전송'으로 필터 건 데이터로 초기화 된다는 것. 

 

그래서 아래처럼 firstRender 라는 임의의 state 를 생성하여 조건을 걸었다. 내가 생각해도 괜찮은 해결책이라 기록해두고 싶었다.

하지만 진실은, 탭이 바뀔 때마다 그리드가 초기화 되도록 코드를 짜면 안됐다. 그리드는 최초 한번만 돌게하고, 그 내부의 데이터만 조건에 맞게 변경시키는 것이 옳은 접근이라 생각된다. 

    }).setColumns(
	...
        )
            .setProvider({
            read: (e) => {
                return new Promise((resolve) => {
                    if (this.state.firstRender) {
                        this.setState({firstRender : false})
                        resolve(
                            this.state.gridData.filter(data => data.currentState === "미전송")
                        );
                    }
                    resolve(
                        this.state.gridData
                    );
                })
            },
            store: (e) => {
                console.log(e)
                return new Promise((resolve) => {
                    resolve();
                })
            }
        })
    }

클래스형