TableRow 의 애니메이션 문제점

새로운 cell 값이 들어왔을 때, 새로 들어온 값에만 애니메이션 효과를 주려고한다.

근데 data.map으로 생성한 Mui의 TableRow는 부모배열(data)가 변경되면 전체가 리렌더링되는 것 같다.

그래서 새로운 값에만 애니메이션이 되는 것이 아닌, data에 포함된 모든 값들에 애니메이션효과를 주게 된다.

그래서 애니메이션 효과를 tablerow가 아닌 애니메이션효과를 주는 박스를 따로 tablerow와 같이 넣어 애니메이션 효과를 주었다.

	<MqttBox>
      {mqttArray.map(row => (
        <MqttWrapper key={row.eventType.id}>
          {row.mqtt && <DisapearBox value={row} />}
          // 애니메이션용 박스
          
          <TableRowComponent/>
          // 테이블 row component
        </MqttWrapper>
      ))}
    </MqttBox>

그리고 여기서 key값을 Math.random()처럼 임의의 값을 넣으면 또한 애니메이션이 정상 작동하지 않는다.