728x90
매우 핵심적인 질문임! MUI DataGrid에서의 setEditCellValue, valueSetter, renderEditCell 이 세 가지는 입력값 처리 흐름에서 각자 맡은 역할이 다름. 아래 표랑 흐름도처럼 설명해줄게.
📊 개념 요약표
기능 이름 역할 호출 시점 비고
| 💡 셀 UI | renderEditCell | 편집 중일 때 입력 UI를 커스터마이징함 | 사용자가 셀을 더블클릭했을 때 | <input>, <Select>, <Chip> 등 직접 구성 |
| ✍️ 값 설정 | setEditCellValue | 편집 UI에서 입력값을 코드로 직접 반영 | 개발자가 수동 호출 | renderEditCell 안에서만 사용 |
| 📦 값 가공 | valueSetter | 입력된 값을 가공하거나 구조 변경해서 저장 | 내부적으로 setEditCellValue → valueSetter 자동 호출됨 | 값을 구조체로 만들거나 validation 할 때 사용 |
🧭 실행 흐름 구조
1. 사용자가 셀 편집 시작
→ renderEditCell 호출 (편집 UI 보여줌)
2. 사용자가 값 입력
→ renderEditCell 안에서 setEditCellValue(...) 호출
→ 내부적으로 valueSetter 호출되어 실제 row 값 변경
3. 사용자가 편집 완료 (blur 또는 Enter)
→ 셀 저장됨
🔧 예시로 보면?
renderEditCell: (params) => {
return (
<input
autoFocus
onChange={(e) =>
params.api.setEditCellValue({ id: params.id, field: params.field, value: e.target.value })
}
/>
);
},
valueSetter: (params) => {
return {
...params.row,
name: params.value.toUpperCase(), // 값을 대문자로 저장
};
}
- renderEditCell: 커스텀 인풋 UI 제공
- setEditCellValue: 값 입력 시 호출 → DataGrid가 내부적으로 valueSetter 실행
- valueSetter: 값 받아서 가공 후 row를 업데이트
💡 요약 정리
시점 사용하는 함수 목적
| 편집 UI 만들 때 | renderEditCell | 사용자에게 보여줄 입력 UI |
| 값 입력받을 때 | setEditCellValue | 사용자가 입력한 값을 DataGrid에 전달 |
| 값 저장할 때 | valueSetter | 전달된 값을 가공해서 실제 row에 반영 |
즉, renderEditCell은 UI를 만들고, setEditCellValue는 값을 넘기고, valueSetter는 최종 저장 가공처리 담당함.
원하는 동작 흐름에 따라 이 셋을 적절히 조합하면 대부분의 커스텀 입력 기능을 만들 수 있음.
더 복잡한 예시 필요하면 말해줘!
728x90
'공부 > frontend' 카테고리의 다른 글
| Generator Function과 async/await: 차이점과 사용법 (0) | 2025.11.02 |
|---|---|
| [GoJS] addNodeData vs addNodeDataCollection (0) | 2025.09.29 |
| some()과 every()로 배열 조건 검사 (0) | 2025.04.07 |
| [React] 리액트 그래프/차트 라이브러리 모음 (0) | 2025.03.12 |
| 페이지 라우팅 (0) | 2025.03.10 |