리액트 뉴비좀 도와주세요 황당한 일을 겪고 있습니다.

Question

이번 프로젝트에서 처음으로 리액트를 하고 있는데 도저히 이해가 안가는 현상이 발생해서 도움 청합니다.실 코드를 첨부하지 못하는 상황 양해 부탁드립니다.데이터를 상태에(useState 사용) 저장하여서 상태를 그대로 그리드 형식으로 렌더링 하기만 하는 로직인데 다른 기능은 다 멀쩡한데 행삭제만 하면 이상하게 렌더링이 꼬이네요정확히는 아래와 같은 그리드에서col1col2col3row1111111111row2222222222row3333333333state에는 위와같은 그리드를 배열로 저장하고 있습니다. 그러니까 위와 같은 상황에선[ {col1: 111, col2: 111, col3: 111}, {col1: 222, col2: 222, col3: 222}, {col1: 333, col2: 333, col3: 333}]이렇게 저장되있겠죠여기서 row2 이번을 삭제하면 예상대로 state에는 [ {col1: 111, col2: 111, col3: 111}, {col1: 333, col2: 333, col3: 333}]이렇게 변화하는데요이상하게 렌더링은col1col2col3row1111111111row2222222222이렇게 나타나네요state에 있지도 않은 값이 이렇게 나오니까 환장하겠습니다.렌더링 순서가 어떻게 꼬였나 봐도 그럴리가 없는것같고심지어 html 요소를 보면(...헤더로우)

row1	111	111	111
row3	333	333	333

이런식으로 state에 맞게 요소가 있습니다.그런데 html에도 맞지않게 렌더링이 되고있습니다.이런 기현상 겪어보신분 계실까요도움주시면 정말 감사하겠습니다.

하얀뼈 · Answer

state업데이트 하는 과정에서 원본 배열을 건들면 그런 현상이 일어나곤 합니다.전체 코드를 봐야 알듯...

완자씅 · Answer

이런거 올리실때 코드도 올리시는게 맞는거같아요

나니야 · Answer

마지막 row를 삭제했나보죠.라고 답변하면 댓글에 "아닌데요! 2번째했습니다!" 이럴거같긴하군요 ㅋㅋ프로젝트 코드라 보여줄수없다는 말이 굉장히 웃긴겁니다.state랑 삭제하는 부분만 간추려서 쓰면 되는걸

리액트 뉴비좀 도와주세요 황당한 일을 겪고 있습니다.

3개의 답변

Q&A 목록