Section4 Unit3 [React] 심화 - Virtual DOM과 React Hooks

출처: https://javascript.plainenglish.io/react-the-virtual-dom-comprehensive-guide-acd19c5e327a

---

Section4 Unit3 [React] 심화 - Virtual DOM과 React Hooks

 

📌 Chapter1. React 심화

• React의 Virtual DOM

출처: https://programmingwithmosh.com/react/react-virtual-dom-explained/

 React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 Virtual DOM이라는 가상의 DOM 객체를 활용한다. 이는 실제 DOM의 사본 같은 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다.

 

 

📌 Chapter2. React Hooks

• 렌더링 최적화를 위한 Hook으로 useMemo와 uesCallback이 있다.

→ useMemo는 값의 재사용을 위해 사용하는 Hook이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook

→ useMemo는 계산 비용이 높은 함수의 결과를 캐시(저장)해서 재사용하는데 사용하고, 결과 값을 반환한다. 즉, 복잡한 계산 결과 같은 것들을 캐시 해서 필요할 때마다 꺼내 쓰는 데에 유용하다.

→ useCallback은 함수 자체를 캐시해서 재사용하는 데에 사용하며, 함수를 반환한다. 함수를 캐시해서 자식 컴포넌트한테 props 값으로 전달하는 데에 유용하다.

→ 둘 다 종속성 배열을 기반으로 동작하고, 해당 종속성 배열 안의 값이 변경되지 않는 이상 이전 결과/함수를 재사용한다.

 

• Custom Hook

 

custom hook을 사용하면,

1. 상태관리 로직의 재활용이 가능하고,

2. 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며,

3. 함수형으로 작성하기 때문에 보다 명료하다 (e.g. useSomething)

custom hook 정의 규칙

1. Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙인다.

2. 대개의 경우 프로젝트 내의 hooks 디렉토리에 Custom Hook을 위치한다.

3. Custom Hook의 return 값은 조건부여서는 안된다.

 

 custom hook이 가지고 있는 state와 Effect는 custom hook을 사용하는 컴포넌트마다 독립적이다. 또, 한 컴포넌트에 커스텀 훅을 여러번 사용해도 독립적인 state와 effect가 여러개 생성된다.

---

🌙  오늘의 회고

 드디어 React 심화 챕터에 들어갔다.

 지난 5일간의 솔로 프로젝트를 하며, 어렵지 않아 보여서 시간 안에 다 구현할 수 있을 줄 알았던 기능들이 사실 구현하기 꽤 까다롭고 어렵다는 것을 느끼고는 이렇게 저렇게 코드를 작성하다가 어느 덧 시간이 흘러버렸다. 여러가지 고민을 하며 만들었는데도, 더 많은 고민을 해야 하다니 🥲

 이번 리액트 심화 챕터는 솔로 프로젝트를 하며 부딪혔던 문제들을 조금이나마 해결할 실마리를 줄 수 있지 않을까, 라는 생각에 반가웠다. 솔로 프로젝트에 이번 유닛에서 학습하게 될 custom hook도 사용했었고, useCallback 함수도 사용했던 터라(이건 알고 쓴건 아니라서..) 좀 더 배우고 싶은 부분이었는데 마침 오늘 학습을 할 수 있었다. 프로젝트 내 여기저기서 리렌더링이 되는 포인트들이 너무 많아서 그 부분도 고민을 했었는데, 메모이제이션을 활용해 개선해봐야겠다는 생각도 들었다.

 이번주에는 우선 진도를 따라가고, 주말에 솔로 프로젝트를 좀 더 다듬어 봐야겠다..!