React3 Virtual DOM이란.... Virtual DOM이란? 이전의 React를 소개하는 글에서 React의 장점에 Virtual DOM을 꼽았었다. 그런데 Virtual DOM이 뭐길래 React의 장점이라고 불리는건지 궁금해 알아보기로 했다. Virtual DOM은 직접적인 DOM조작이 가져오는 비효율적인 부분을 개선하기 위해 개발된 기술이다. DOM 조작이 전체동작을 비효율적으로 만드는게 아니라, 그 이후에 일어나는 일 때문에 작업이 더뎌지는 것이다. Browser의 Workflow 일단 이를 이해하기 위해서는 브라우저가 어떻게 동작하는지 알아야 한다. 브라우저의 동작방식 Virtual DOM 이제 DOM을 조작했을 때 어떤 작업이 이뤄지는지 알겠죠? DOM에 변화가 생기면, 렌더트리를 재생성하고 레이아웃을 만들고 페인팅을 하는 과.. 2022. 8. 11. [Next] Next.js란 무엇인가? Next란? Vercel에서 만든 React Framework로 SSR, SEO를 지원하는 엄청난 프레임 워크이다. Next를 쓰는 이유는? 그럼 Next를 쓰는 이유는 뭘까? 바로 SSR과 SEO때문이다. 여기서 SSR이란.. SPA 일반적인 Page의 LifeCycle은 다음과 같습니다. Client에서 Server로 최초의 요청을 보냅니다. Server는 응답을 보내고 Client에서 화면이 보입니다. Client에서 상호작용을 하기위한 요청을 Server에 보냅니다. Server는 이에 응답합니다. 페이지가 Reload 됩니다. 위와 같은 방법은 페이지가 요청을 보내고 받을때 마다 Reload가 되기 때문에 효율적이지 못하게 page가 관리 되고 있습니다. 따라서 위와 같은 방법을 해결할 수 있는.. 2022. 3. 28. [React] React란 무엇인가? 리액트는 누가 만들었는가? 🧐 처음은 리액트의 기원부터 돌아가볼려고 한다. 리액트는 Facebook에서 2011년에 만든 라이브러리이다. 그전에는 jquery 또는 backbone, angular를 가장 많이 사용했으나 react의 등장으로 새로운 시대를 불러오게 되었다. 왜 만들어졌는가? 🧐 그전에 사용되었던 프레임워크는 MVC패턴 혹은 MVVM패턴을 이용한다. 이런 식으로 model에서 처리한 데이터를 view에서 실제 DOM에 계속 처리하는 방식은 웹의 규모가 크면 클수록 성능 저하의 원인이 될 수 있기에 React에서는 Virtual DOM이라는 가상의 돔에 새롭게 렌더링하여 현재의 DOM과 비교하여 기존의 view에 수정하는 방식으로 성능저하를 해결하기 위해 만들게 되었다. 리액트의 특징 👍 리.. 2022. 3. 28. 이전 1 다음
