728x90 반응형 그림일기2 [React] 메모리에 있는 값과 화면에 보여지는 값이 상이한 문제 문제 상황 아래 사진에서 삭제 버튼을 클릭했을 때 메모리에 있는 skillList(redux로 관리하고 있는 배열로, 객체들을 요소로 가지고 있다.)의 값은 변경되지만, 실제 화면에 보여지는 값은 변경되지 않는 문제점이 있었다. 시도한 해결방법과 문제점 skillList.map을 실행할 때 주는 key의 값을 index(숫자)가 아닌 랜덤한 값을 주는 방법이였다. 이 방법을 시도하게 된 이유는 스킬 추가 버튼을 클릭했을 때 콘솔창에 오류가 발생하는데 key prop이 문제라는 내용의 오류 문구였고, 이를 해결하면 문제 상황이 해결될 줄 알았다. 지금 생각해보면 그 오류는 그 오류고,(사실 오류도 아니였고 warning이였다😂) 값이 변경되지 않는 문제는 다른 문제였을텐데 아무튼 여기에 꽃혀서 빙빙 돌아갔.. 2023. 3. 8. React Virtual DOM이란? DOM이란? 브라우저는 화면을 그리기 위해서 DOM(Document Object Model)이라는 개념을 사용한다. DOM은 HTML 파일 내용을 토대로 만들어지는데, JavaScript와 같은 언어로 수정할 수 있도록 만들어진 웹 페이지의 객체 지향 표현이다. DOM은 브라우저가 화면을 그리기 위해 필요한 정보가 트리 형태로 저장된 데이터다. DOM이 제공하는 API를 통해 DOM 구조에 접근하고, 원하는대로 변경할 수 있다. 이를 DOM 조작이라고 한다. Virtual DOM이란? React에서 Virtual DOM은 실제 DOM 내용에 기반하여 만들어진다. 실제 DOM과 같은 내용을 담고 있는 복사본이라고 생각하면 되는데 이 복사본은 실제 DOM이 아닌 JavaScript 객체 형태로 메모리 안에 .. 2023. 2. 8. 이전 1 다음 728x90 반응형
