VDOM (2) 썸네일형 리스트형 React 톺아보기를 보고 정리하기_1 1. Preview 이 글은 리액트 사용법에 대한 글이 아니다. 리액트를 통해 프로젝트를 진행한 경험이 있고 동작 방식을 어렴풋이 이해하기는 하지만 여전히 리액트가 마법처럼 느껴지고 응용 에러 디버깅 등에 어려움을 겪는 사람들을 위해 작성되었다. 시리즈의 내용은 사용자의 상호 작용으로부터 훅을 통해 컴포넌트가 업데이트되고 DOM에 마운트되기 까지의 일련의 과정을 실제 코드를 통해 분석해 나가게 될 것이다. 코드에 변형을 가하지 않고 코드 그대로 변수 하나하나 뭣을 위해 선언되었는지 A-Z 까지 알아보자. 시리즈 끝에는 아래 질문들의 답을 파악하도록 하자. Virtual DOM이 무엇인지 컴포넌트 상태가 바뀌었을 때 리액트는 어떻게 해당 컴포넌트를 리-렌더링시키는지 어떻게 변경된 부분만 DOM에 마운트 되.. React 배열에 key가 존재하는 이유 쾌락코딩님의 글을 보고 제식대로 정리한 것입니다. React를 사용하신 분이라면 map을 이용해 리스트를 표현할 때 key값을 설정안했을 때의 노란색 경고창을 본 경험이 있을 것이다. 그곳에 항상 index값을 넣고 사용하긴 했지만 정작 index값이 필수적으로 필요한지 정확히 알고 사용하진 않았다. 마침 일방적 담당 쌤인 종원쌤이 나에게 되물었다. "왜 key값이 필요한지 아나요?" 5초 고민하고 나온 답은 key값을 통해 list에 유일 키를 부여하고 변경 시에 효율적인 탐색을 통해 값을 변경하기 위해서 입니다. 거의 맞았다고 하셨지만 sibing 방식을 추가해서 설명해야 100점이라고 했다. 좀 더 자세히 알아보자. React는 VDom을 사용한다. 그래서 map을 통해 요소를 그릴 때 처음에는 렌.. 이전 1 다음
