🔑아는 내용이라도 자만하지 말고 다시 한번 보자
💡 React의 컴포넌트 Component
📃 React 에서는 Component라는 개념을 사용합니다. 간단하게 Component는 레고라고 생각하시면 됩니다. "우리는 어린 시절 레고를 조립해서 성을 만들기도, 배를 만들기도 했습니다" 이처럼 React에서는 Component를 조립하고 배치하여 웹페이지를 구현합니다.
💡 Virtual DOM 가상 돔과 기본적인 메커니즘
📃 React의 핵심은 Virtual DOM을 활용한 효율적인 업데이트에 있습니다. 과거에는 사용자의 이벤트로 웹페이지가 변경될 때, 변경된 부분만 수정하는 것이 아니라 전체 페이지를 다시 렌더링하는 방식이 일반적이었습니다.
📃하지만 React에서는 Component단위로 페이지가 나눠져 있기 때문에 수정된 부분만 업데이트를 해주는 혁신적인 방법을 사용합니다.
📃 여기서 등장하는 것이 가상 DOM(Virtual DOM)입니다. React는 컴포넌트의 상태나 props가 변경됨에 따라 새로운 Virtual DOM을 생성합니다. 이렇게 생성되는 Virtual DOM은 메모리 상에 가상의 트리 구조로 존재하고, 이는 실제 DOM의 사본처럼 동작하지만 훨씬 가볍습니다
⬆️ Diff 알고리즘은 React 내부적으로 새로운 Virtual DOM과 이전 Virtual DOM을 비교하는 작업을 수행합니다. diff 알고리즘이 변경된 부분을 찾아내면, 이를 기반으로 Reconciliation (조정, 대조) 이라는 과정을 거칩니다. 이 과정에서 변경된 부분만 실제 DOM에 적용하여, 최소한의 리소스를 사용해 화면을 업데이트합니다
💡 MPA vs SPA
📃 MPA(Multi Page Application)와 SPA(Single Page Application)는 각각의 장단점이 있어, 어떤 방식이 더 좋다고 일반화하기 어렵습니다. 다만, React는 주로 SPA를 구축하는 데 사용됩니다
