[TIL] 20220712 ag grid 테이블 상태 저장하는 것에 대한 기묘한 현상

1. ag grid 테이블 상태 저장하는 것에 대한 기묘한 현상

(나만 알아볼 수 있음)

어떤 페이지는 이런 필터가 있는 페이지가 있고

어떤 페이지는 없다. 

 

없는 페이지에서 테이블에 필터를 걸거나 컬럼 위치를 바꾸고 다른 페이지를 갔다가 다시 돌아왔을때

상태저장을 하기 위해서

 

위 코드와 같이 사용할 수 있었다. 

 

위 코드에서 gridColumnApi 와 gridApi 는 onGridReady함수를 실행할 때

useState를 사용해서 상태를 초기값에서 할당해주는 방식이다. 

 

하지만 날짜 필터가 있는 페이지에서는 gridColumnApi가 null로 나와서 상태 저장 코드를 실행할 수 없었다. 

위 필터는 ag grid자체를 건드리는 것이 아니라 날짜를 선택했을 때 다시 api를 호출하는 형태인데 도무지 원인은 알 수 없었다. 

그러나 해결방법은 있다. 

 

 

코드의 차이를 본다면,

위에서는 useState에서 세팅한 columnApi를 사용했다면 여기서는 ag grid  event가 일어났을때 파라미터로 들어오는 event에서 직접 columnApi 를 가져와서 사용하고 있다. 

 

event란 on으로 시작하는 ag grid event이다. 

여기서 넘어오는 event로 사용해서 해결했다. 

 

더 기묘한 것은 그럼 날짜 필터가 없는 페이지도 event로 직접 가져오는 것으로 통일해야겠다 생각했는데

그건 또 안된다. 

필터가 없는 페이지는 useState, 필터가 있는 페이지는 event에서 columnApi를 가져와서 사용해야한다. 

 

 

---

코드가 똑같은데 왜 안될까 하면서 고민하고 있었는데 실장님이 와서 무슨 심각한 고민을 하고 있는 것 같다며 같이 고민을 해주셨다.

그리고 플로우를 보면서 어디 어디 콘솔을 찍어보라고 하시면서 점점 실마리를 찾아가는데 너무 신기했다!!

역시 문제가 안풀릴때는 따라가면서 콘솔을 다 찍어보는 것이구나..!!!!

그리고 그냥 지나칠 수도 있는데 도와주시는 시니어분들이 있어 정말 감사하고 행운이다 

앞으로는 나도 척척박사가 되고싶다 하하