EN

페이지 4: 커스텀 셀 렌더러 및 편집기

4. 커스텀 셀 렌더러 및 편집기

AG Grid의 강력한 기능 중 하나는 커스텀 셀 렌더러(Cell Renderer)와 셀 편집기(Cell Editor)를 사용하여 기본 셀 모양이나 편집 동작을 React 컴포넌트로 완전히 대체할 수 있다는 점입니다. 이는 복잡한 UI 요구 사항에 유연하게 대응할 수 있도록 합니다.

4.1. 커스텀 셀 렌더러 구현

특정 컬럼의 셀 내용을 커스터마이징하려면 cellRenderer 속성에 React 컴포넌트를 지정합니다. 이 컴포넌트는 그리드에서 셀 데이터를 렌더링할 때 사용됩니다.

// MyButtonRenderer.js
import React from 'react';

export default ({ value, data }) => {
  const buttonClicked = () => {
    alert(\`Row data: \${JSON.stringify(data)}\`);
  };
  return <button onClick={buttonClicked}>클릭: {value}</button>;
};

// columnDefs 예시:
{
  headerName: "동작",
  field: "valueField",
  cellRenderer: 'MyButtonRenderer' // 컴포넌트 이름 지정
}

// AgGridReact 컴포넌트의 frameworkComponents 속성:
<AgGridReact
  // ...
  frameworkComponents={{ MyButtonRenderer }}
></AgGridReact>

4.2. 커스텀 셀 편집기 구현

셀 편집 기능을 커스터마이징하려면 cellEditor 속성에 React 컴포넌트를 지정합니다. 이 컴포넌트는 사용자가 셀을 편집할 때 나타납니다.

// MySelectEditor.js (예시: 드롭다운 편집기)
import React, { useState, forwardRef, useImperativeHandle } from 'react';

export default forwardRef((props, ref) => {
  const [value, setValue] = useState(props.value);

  useImperativeHandle(ref, () => {
    return {
      getValue() {
        return value;
      }
    };
  });

  return (
    <select value={value} onChange={e => setValue(e.target.value)}>
      <option value="Male">남성</option>
      <option value="Female">여성</option>
    </select>
  );
});

// columnDefs 예시:
{
  headerName: "성별",
  field: "gender",
  editable: true,
  cellEditor: 'MySelectEditor' // 커스텀 편집기 지정
}
// frameworkComponents에 MySelectEditor 추가

참고: 커스텀 컴포넌트를 AgGridReact에 연결하려면 frameworkComponents prop을 사용해야 합니다.

Contact Us