Virtual DOM이 나오게 된 배경🤔
실제 DOM은 스크립팅 언어가 접근 및 탐색하는 속도가 빨라 탐색 후 변경 및 업데이트하는 속도는 역시 빠르다. 하지만 JavaScript로 조작하는 DOM의 요소가 많을수록 모든 DOM 업데이트에 대하여 리플로우를 해야 하므로 DOM의 업데이트에 대한 비용 증가한다. 이를 보완하고자 Virtual DOM이 등장하였다.
Virtual DOM🌳
Virtual DOM이란 실제 DOM의 가벼운 사본 개념으로 React는 Virtual DOM에 접근하여 변화 전후를 비교한 뒤 바뀐 부분을 적용시킨다. Virtual DOM 객체가 실제 DOM 객체와 같이 실제로 브라우저 화면에 그려지는 것은 아니기 때문에 속도 측면에서 유리하다.
트리 조작 방식 알고리즘의 가정(휴리스틱 알고리즘 기반)
key
프로퍼티를 가지고, 여러 번 렌더링을 거쳐도 변경되지 말아야 하는 자식 요소가 무엇인지 알아낼 수 있을 것이다🏷 React의 비교 알고리즘(React Diffing Algorithm)
- React의 DOM 트리 탐색 방법
: 트리의 레벨 순서대로 순회하는 방식으로 탐색
→ 너비 우선 탐색(BFS)의 일종
key
라는 속성 지원key
: key
속성을 통해 기존 트리 노드와 새로운 트리 노드들의 일치 여부 비교 가능key
속성에는 유일한 값을 부여: 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능으로 뛰어난 재사용성과 직관성을 갖는 함수
함수형 컴포넌트의 사용이 증가한 이유🧐
클래스형 컴포넌트는 복잡해질수록 이해가 어렵고 컴포넌트 사이의 상태 로직 재사용이 어렵다는 단점과 JavaScript 문법을 정확하게 인지하지 못하는 경우this
키워드의 동작 방식을 이해하기 어렵다는 단점이 있다. 이에 반해 함수형 컴포넌트는 클래스형에 비해 직관적이고 보기 쉽다는 특징과 함께 Hook의 등장으로 state를 추가할 수 있다는 큰 장점까지 얻게 되어 함수형 컴포넌트의 사용이 증가하였다.
💡useMemo💡
: 특정 값을 재사용하고자 할 때 사용하는 Hook으로 복잡한 연산의 중복을 피하고 React 앱의 성능을 최적화시키는 메서드
💡useCallback💡
: 함수의 재사용을 위해 사용하는 Hook으로 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환하는 메서드
useCallback과 참조 동등성❓
: useCallback은 참조 동등성에 의존한다
💡Custom Hooks💡
: 개발자가 스스로 커스텀한 Hook으로 반복되는 로직을 함수로 뽑아내 재사용이 가능하게 하는 메서드
use
를 붙인다: 런타임 시 여러 번들을 동적으로 만들고 불러오는 것
React에서의 코드 분할🤖
: dynamic import(동적 불러오기) 사용하기
- 구문 분석 및 컴파일 해야하는 스크립트의 양을 최소화
- Static import(정적 불러오기)
: 코드 파일 가장 최상위에서import
지시자를 이용해 사용하고자 하는 라이브러리 및 파일을 불러오는 방법- Dynamic import(동적 불러오기)
: 코드 중간에 필요한 파일 및 라이브러리를 불러오는 방법
then
함수를 사용해 필요한 코드만 가져옴- 가져온 코드에 대한 모든 호출은 해당 함수 내부에 있어야 함
React.lazy
와 함께 사용
React.lazy()
: dynamic import를 사용해 컴포넌트를 렌더링할 수 있도록 하는 메서드
React.lazy
로 감싼 컴포넌트는 React.suspense
컴포넌트의 하위에서 렌더링해야 함Suspense
: 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고, 로딩이 완료되면 렌더링이 준비된 컴포넌트를 보여주는 기능
fallback
prop: 컴포넌트가 로드될 때까지 기다리는 동안 로딩화면으로 보여줄 React 앨리먼트를 받아들이는 속성Suspense
컴포넌트 하나로 여러 개의 lazy
컴포넌트를 보여줄 수 있음🗺 location
window.loaction
프로퍼티에 접근하면 현재 document의 위치에 대한 정보를 담고 있는 Location 객체를 얻어올 수 있다.window.location
은location
으로도 많이 쓰인다.
location.reload()
true
를 설정 시 브라우저 캐시를 무시하고 서버에서 새로 불러올 수 있음(기본값: false) location.assign()
location.replace()
assign()
과의 차이점assign()
를 사용하여 현재 페이지에서 주어진 URL로 이동 시 session history에 이전 기록이 남기 때문에 뒤로 가기가 가능하나 replace()
메서드 사용하여 현재 페이지에서 주어진 URL로 대체될 경우 session history에 이전 기록이 남지 않기 때문에 뒤로 가기 기능이 불가능하다.<오늘의 일기>
useState와 useEffect 이외에 다른 여러 hook들을 경험해보고 custom hook을 만들어보았던 이번 유닛은 비교적 재미있게 진행할 수 있었다.
최근 스스로가 정체되어 있다는 느낌이 들어 고민이 많아지고 조급한 마음만 늘었는데 그 시기가 지나가면서 능동적으로 공부할 수 있는 힘이 다시금 생겨나고 있는 것 같다. 누군가 나를 잡기 위해 쫓아오고 있는 것도 아니니 조급하게 생각하지 말고 묵묵히 갈 길을 가보자!