react의 버츄얼 돔에 대해 조금 더 생각을 해보던 도중에 이런생각이 들었다. 우선 react 버츄얼돔에 대해서 정리한글을 보자.
react 버츄얼 돔 해당 링크를 클릭하면 react 버츄얼 돔에 대한 설명을 볼 수 있다.
- 요약하자면 DOM에 직접적으로 수정을 하는게아니라 DOM을 복사한 가상돔을 만든다.
- 처음 가상DOM과 변경사항이 적용된 가상DOM을 비교한다.
- 변경된 부분을 적용한다.
이런식으로 흘러가며 동작하게된다. 근데 예전에 프로젝트할때 배열을 관리하기가 굉장히 어려웠던게 기억난다.
그 이유가 처음 개발을 할때, 난 당연히 push함수로 배열에 값을 추가해서 넣어줬는데 당시 두가지 문제가 있었다.
- 우선 push함수의 return값은 항목 추가시 배열의 길이라 setState 함수가 제대로 동작하지도 않았다.
- 강제로 넣어준 객체를 들고왔을때 수정은 되지만, state가 변해도 페이지가 리렌더링 되지 않았었다.
그래서 concat함수를 써서 배열의 불변성을 유지하며 배열을 변경했었는데, 그때는 솔직히 실력도 부족하고 읽어봐도 뭔소린지 잘 모르겠어서 일단 동작이 되는대로 열심히 만들었었다. 그런데 그와 관련해서 오늘 궁금한점이 생겼다.
궁금한 부분은 이렇다.
상황: react게시판에서 글을 추가한다. 추가된 글의 정보를 백엔드로 보낸다. 이후 자동적으로 게시판 글이 추가되어야한다.
위의 상황을 어떻게 구현할 수 있을까? 두가지 방법이 있을것같다.
- API가 추가 후 추가된 글의 정보를 반환한다면, state에 해당부분을 추가해준다.
- 글의 정보를 API로 전송 후 API에서 전체 데이터 조회를 하여 state를 새로 만들어준다.
근데 이 두가지 방법중 첫번째 관리의 불변성 관리가 너무 까다롭다는 생각이 들었다.
실제로 그 방법을 어떻게 구현하나 골똘히 고민해보다가 아래 블로그를 찾았다. 이후에 예제도 만들어볼 예정이다.
https://kyounghwan01.github.io/blog/React/immer-js/#immer-js%E1%84%85%E1%85%A1%E1%86%AB
