react에서 테이블에 동적으로 tr 추가 하는 방법

Question

특정 행에서 +를 클릭하면그 tr 밑으로 새로운 tr이 적용되도록 하려고 합니다.append, appendchild 그리고검색을 해보니 insertAfter를 구현해놓은 글을이 많아 따라서 해보니특정행의 마지막 td 밑으로 들어갑니다.어떻게 하면 특정 tr 다음으로 tr를 붙일수 있을까요?const onTest = (e, NO) => { const currentTr = tdTest.current[NO]; // colspan 적용 코드 let currentColspan = currentTr.lastChild.getAttribute("colSpan") !== null ? currentTr.lastChild.getAttribute("colSpan") : 1; let changeColspan = parseInt(currentColspan) + 1; // end colspan 적용 코드 let cloneTr = currentTr.cloneNode(true); // 클릭한 tr행을 복사 cloneTr.removeChild(cloneTr.firstChild); // 복사한 tr 첫번째 삭제 //currentTr.append(cloneTr); console.log(currentTr.lastChild.parentNode); //테스트 + - .... 클릭한 ... }; (tdTest.current[row_id = ref>테스트 - .... 테스트.... .....

프2년차 · Answer

이렇게 코드를 작성하는 것은 react가 추구하는 방향성과는 조금 다르다고 생각합니다!usestate와 map, splice 메서드를 사용하여 구현하면 말씀하시는 문제점도 자연스럽게 해결 될 것 같습니다최소 기능만 구현해보았습니다interface Item { id: number; title: string; content: string; } const dummyItems = [ { id: 1, title: 'title1', content: 'content1' }, { id: 2, title: 'title2', content: 'content2' }, { id: 3, title: 'title3', content: 'content3' }, ]; const Table = () => { const [items, setItems] = useState(dummyItems); const handleAddItem = (index: number) => { const newItem = { id: items.length + 1, title: 'title', content: 'content', }; const newItems = [...items]; newItems.splice(index + 1, 0, newItem); setItems(newItems); }; const handleRemoveItem = (id: number) => { const newItems = items.filter((item) => item.id !== id); setItems(newItems); }; return ( {items?.map((item, idx) => ( ))}

id	title	content
{item.id}	{item.title}	{item.content}	handleAddItem(idx)}>+	handleRemoveItem(item.id)}>-

); }; export default Table;

shintwl · Answer

리액트는 직접 dom을 조작하는 방식이 아니지 않나요..?

react에서 테이블에 동적으로 tr 추가 하는 방법

2개의 답변

Q&A 목록