react handler 관리

부모페이지와 자식페이지 간의 핸들러 관리

parent.js

  const gridHandlers = {
    onClickPopOpen: handleGridPopOpen,
    onClickPageMove: handlePageMove,
    onClickAlert: handleAlert,
  };

  // 핸들러:팝업호출
  async function handleGridPopOpen(rowData) {
    console.log(rowData);
    await getPopDetailData(rowData.id);
    setPopOpen(true);
  }

  // 핸들러:화면이동
  function handlePageMove() {
    console.log("pageMove");
  }

  // 핸들러:알럿
  function handleAlert() {
    alert("alert");
  }
  
  ...
  <Grid
    colData={gridColData}
    rowData={apiData}
    gridHandlers={gridHandlers}
  ></Grid>
  

Grid.js

export default function Grid(props) {
  // 셀 타입 렌더러
  function getRenderCell(type) {
    if (type === "btnPop") {
      return (params) => (
        <Button
          className="btn line-gray size-s"
          onClick={() => {
            props.gridHandlers.onClickPopOpen(params);
          }}
        >
          <span className="txt">id : {params.value}</span>
        </Button>
      );
    } else {
      return undefined;
    }
  }

  // 컬럼데이터 렌더링 변환
  const columnsData = props.colData.map(function (col) {
    return {
      ...col,
      renderCell: getRenderCell(col.renderType),
    };
  });
  
  return (마크업)