react (11) 썸네일형 리스트형 제어 컴포넌트 vs 비제어 컴포넌트 리액트로 폼을 다루는 방법은 크게 두 가지가 있다. 바로 제어 컴포넌트와 비제어 컴포넌트이다. 우테코 강의 시간에서도 두 방식에 대해 크루들과 코치들이 같이 논의하는 시간을 가졌던 기억이 있다. 그런데 그때에 잘 이해하지 못 한 부분이 많았어서 오늘 한 번 정리해보고자 한다. 참고로 나는 제어 컴포넌트를 선호하는 편인 것 같다 ㅎ ㅎ 이유는 흠,,,,아무래도 나는 리액트에서 ref의 사용을 지양하고자 하는 생각이 있어서 자연스레 제어 컴포넌트를 통해 폼을 구현하는 편인 것 같다. HTML Form 엘리먼트는 그 자체가 내부에 상태를 가진다. 이 특성에 의해 폼을 다루는 두 가지 방법이 존재할 수 있다. 미리 정리해보면, 폼 엘리먼트가 가지는 상태를 그대로 사용하는 것이 비제어 컴포넌트이고, 중간에 Rea.. Key KEY? 왜 사용해야 할까? Key는 컴포넌트 배열을 렌더링 할 때 어떤 element에 변화가 있는지 알아내기 위해 사용하는 값이다. 조금 더 추가해 설명해보자면, 리액트가 DOM 업데이트를 위해 이전 V-DOM과 현재 V-DOM에 대해 비교 연산하는 과정을 재조정이라고 한다. 이 재조정 과정에서 빛을 발하는 게 key다. 부모 요소에서 여러 자식 요소가 병렬적으로 많이 있을 때, key를 사용하면 이전 자식에 비해 현재 자식 중에 어떤 게 추가되고, 어떤 게 삭제되었는지 정확히 알 수 있다. 리액트에서는 데이터의 변화가 잦고 그에 따라서 새로운 컴포넌트를 생성할 수도, 수정할 수도, 삭제할 수도 있다. 이런 상황에서 우리는 key가 없다면 일일이 모든 컴포넌트를 순차적으로 탐색하며 변화가 있는 컴포넌.. Virtual DOM Virtual DOM에 대해 알아보기 전에 DOM의 개념부터 정리해보자. DOM DOM이란 Document Object Model이다. 웹 문서 내 모든 요소와 요소의 어트리뷰트 및 텍스트를 각각의 객체로 표현하여 이 객체들의 부자 관계를 트리 구조로 표현한 모델이다. 서버에서 온 웹문서는 브라우저가 스스로 이해할 수 없으므로, 웹 페이지를 이루는 태그들이을 브라우저가 이해할 수 있게끔(메모리에 적재할 수 있게끔) 트리 구조로 만든 객체 모델이다. Virtual DOM이 등장한 이유 DOM에 변화가 생기면 브라우저는 Render Tree를 재생성하고 이에 따라 Layout 및 Painting 과정이 다시 일어난다. 복잡한 SPA에서는 잦은 DOM 조작이 발생하는데, 잦은 변화를 반영하기 위해 브라우저는 .. 이전 1 2 다음
