- Polymer에서 React로 리펙토링을 진행중
- ag-grid 라이브러리를 사용하여 data table을 구성
- useState로 할당한 buttonType이 ag-grid의
onRowDoubleClicked
이벤트에서 데이터 동기화 문제가 발생
enum ButtonType {
Type1 = 'type1',
Type2 = 'type2',
// ...
}
const [btnType, setBtnType] = useState<ButtonType>(ButtonType.Type1);
setBtnType(ButtonType.Type2);
onRowDoubleClicked(e: RowDoubleClieckedEvent) {
console.log(`btnType: ${btnType}`);
if (btnType === Button.Type2 && ...) {
// ...
}
}
type2
type1
// ...
const [gridOptions, setGridOptions] = useState<GridOptions>({
// ...
onRowDoubleClicked(e: RowDoubleClickedEvent) {
const { type, ... } = e.context;
console.log(`btnType: ${type}`);
if (type === ButtonType.Type2 && ...) {
// ...
}
},
}
// ...
<AgGridReact
gridOptions={gridOptions}
context={{type: btnType, ...}}
/>
- en: The context object is passed to most of the callbacks used in the grid.
- ko: grid에 대부분의 콜백들에게 전달되는 객체
type2
type2
// ...
const onRowDoubleClicked = (e:RowDoubleClickedEvent) => {
console.log(`btnType: ${btnType}`);
if (btnType === ButtonType.Type2 && ...) {
// ...
}
}
// ...
<AgGridReact
gridOptions={gridOptions}
onRowDoubleClicked={onRowDoubleClicked}
/>
코드 리뷰에서 gridOptions 초기 세팅에 이벤트를 등록하면 위와 같은 동기화 문제를 격을 수 있어 AgGridReact의 props에 이벤트를 등록하면 해결 할 수 있다는 피드백을 받아 props로 이벤트를 전달해 보았다.
기대된 결과값: type2
출력된 결과값: type2