React#6 _ 컴포넌트 나누기의 중요성 그리고 DOM

이 전의 다뤘던 Memo의 기능처럼 리 랜더링을 방지하기 위해 memo를 쓰지만

더욱 중요한 건 컴포넌트를 적절하게 나누는 것이다.

 

컴포넌트를 나누는 것이 React의 궁극적 이유이기도 하고

결론적으로 컴포넌트를 잘게 나눠서 구분하여 관리하는 것이 효율적이다.

 

 

+ useMemo 기능

: 이 기능과 그냥 memo를 혼동하면 안된다. memo는 컴포넌트를 감싸고 useMemo는 함수를 감싼다.

예를들어서 복잡한 계산이 있는 함수의 경우, 계속해서 랜더링 되게 하고 싶지 않을때 useMemo를 사용하고

똑같이 dependeny 를 설정하여 불필요한 랜더링을 방지한다.

 

다만 useMemo 또한 사용하는 자체만으로 성능에 영향을 주기때문에 남발해서 사용하는 건 지양해야한다.

 

 

+++ Dom에 대한 이해 +++

 

React와 가상 DOM의 작동 원리

 

React는 DOM을 다룰 때 효율성을 극대화하기 위해 가상 DOM(Virtual DOM)을 사용한다.

바로 기존의 DOM을 직접 업데이트하지 않고 메모리 상에서 가상으로 DOM을 만들어 변경 사항만 실제 DOM에 적용하는 방식이다.

 

DOM 업데이트의 흐름

 

가상 DOM은 React에서 상태(state)나 속성(props)이 바뀔 때 새롭게 생성된다.

그런 다음 이전에 만들어둔 가상 DOM과 비교(diffing)하여 달라진 부분만 찾아낸다.

이 과정에서 최소한의 DOM 업데이트만 발생하도록 최적화된다.

 

예를 들어, <h1>Hello, World!</h1>가 <h1>Hello, React!</h1>로 변경된다면,

React는 <h1> 태그는 그대로 두고 텍스트 노드만 업데이트한다.

이런 방식으로 불필요한 연산을 줄이고, 성능을 유지한다.

 

중요한 건 필요한 곳에서만 사용하는 것

 

가상 DOM 자체는 효율적이지만, React 앱의 성능을 끌어올리기 위해서는

컴포넌트를 적절히 나누고, 필요한 곳에서만 업데이트를 발생시키는 설계가 더 중요하다.

 

복잡한 계산이 반복적으로 발생하는 경우 useMemo로 계산 결과를 메모이제이션하거나,

전체 컴포넌트가 리렌더링 되는 걸 막기 위해 React.memo를 사용하면 된다.

 

다만, useMemo와 같은 최적화 도구를 남발하면 오히려 성능에 악영향을 줄 수도 있다.

필요한 곳에만 적절히 사용하는 것이 핵심이다.

 

결론적으로

 

React의 가상 DOM은 변경 사항만 업데이트하는 효율적인 구조를 가지고 있다.

하지만 가상 DOM 자체에만 의존하기보다 컴포넌트 구조와 렌더링 방식을 잘 설계하는 것이

React 개발에서 진짜 중요한 부분이다.

 

최적화는 필요할 때만, 그리고 적절히.