[MUI] 그리드 key-value 변수를 객체에 입혀주는 방법

그리드에서 셀 데이터 변경 이벤트를 처리한다.

id, field, value가 넘어온다.

찾아보니까 아래 코드 모양이 제일 예쁘다.

map을 써서 조건문으로 바꾸고 싶은 값을 바꿔줌

근데 content라는 속성 key가 딱 정해져있지 않고 바뀐다.

setData(
    data.map((it) =>
    	it.id === targetId ? { ...it, content: newContent } : it
    )
);

 

 

기존 객체에 이렇게 입혀주고 싶다.

key:value 형태는 안되나보다.

객체에 바로 key:value 형태로는 안써지는 듯 하여

object['key'] = value; 형태로 써야겠다 싶어서

아래 코드 처럼 BaseItem에 인덱스 시그니처 추가

interface BaseItem {
  [key: string]: any;
  id: any;
  selected?: boolean;
}

 

근데 써놓고 보니까 더럽다. map만 딱 썼을떄는 깔끔해보였는데 안더러운 방법을 찾아봐야 겠다.

당장은 검색어가 떠오르지 않는데 좀 전반적으로 자바스크립트 공부를 해야될 것 같음

 

 

https://developer-talk.tistory.com/297

[TypeScript]인덱스 시그니처(Index Signature) 사용 방법

https://velog.io/@fltxld3/React-로-배열-수정하기-feat.일기장

[React] useState( )로 배열 수정하기 (feat.일기장)