https://simsimjae.tistory.com/382
왜 리액트는 대세가 되었을까?
주변에서 다들 리액트가 빠르다, 좋다. 하는데 정확히 어떤 부분이 좋은건데? 라고 물어보면 명확한 답변을 하기가 어려웠습니다. 그래서 이번기회에 리액트가 왜 좋은거고 어떤 장점이 있는건
simsimjae.tistory.com
브라우저의 렌더링 과정: parse -> layout -> paint -> composite(paint과정에서 나눠진 레이어들을 합침)
jQuery나 js로 직접 DOM에 접근해서 수정하면 매번 reflow (layout -> paint -> composite)이 일어나며 이는 렌더링 과정에서 대부분의 시간을 잡아먹는 작업이므로 비효율적
리액트는 업데이트가 필요한 UI컴포넌트를 하나씩 수정하지 않습니다. 리액트 컴포넌트가 리턴한 JSX를 해석해서 Virtual DOM에 그리고, 이것을 모든 컴포넌트에 대해서 반복합니다. 전부 다 그렸으면 실제 DOM과 비교해서 변경된 부분만 변경시켜주는것이죠. 어떻게 보면 조삼모사처럼 보일수도있습니다. 한번에 하나씩 변경시킬것인가? 아니면 모아서 한번에 처리할것인가? 근데 후자의 방법이 더 좋은 방법입니다. 왜냐면, 모아서 한번에 처리하면 리플로우는 딱 한번 일어나기 때문에 브라우저의 리소스를 덜 사용하기 때문입니다.
유저와의 상호작용이 많아서 서버에서 데이터를 가져와서 UI에 그 데이터를 묶어서 보여줘야 하는 경우가 많은 서비스에서는 리액트가 훨씬 개발하기 편하고 빠릅니다.
DOM관리를 리액트가 알아서 편리하게 해주기 때문이죠. 저희는 그저 데이터와 UI 컴포넌트를 묶어주기만 하면 됩니다. 직접 DOM에 접근할 필요가 없어요.
출처: https://simsimjae.tistory.com/382 [104%:티스토리]
'react' 카테고리의 다른 글
| [React Jsx Syntax] style="display:none;"에러남 style={{display:'none',...}}로 써야함 (0) | 2024.01.22 |
|---|---|
| react에 css 파일 import할때 css파일내에 문법에러있으면 import에러남 (0) | 2024.01.11 |
| 최적화: 비구조화(구조분해, destructuring) 할당을 통해 state갯수 줄이기 (0) | 2024.01.11 |
| [React.memo, useCallback]렌더링최적화 - component단위로 가능 (0) | 2024.01.10 |
| useMemo: 값 재사용(rerender할때마다 초기화하지 않고 기억해두고 사용), useCallback: 함수 재사용 (0) | 2024.01.10 |