react 썸네일형 리스트형 정글[Week_05]: React의 Component · State · Hooks 이해하기 지난 주에는 React가 가상 돔을 사용하여 어떻게 렌더링 비용을 획기적으로 절약하는지 알아보았다. 이번에는 렌더링 자체에만 국한하지 않고, React에서 각 요소들이 어떻게 운영되는지 알아보고자 한다. React에서 중요한 개념, State이전 글에서 React는 부분적인 렌더링을 하도록 최적화를 하였다고 기술하였다. 이때 부분적 랜더링을 화면을 직접 그리는 paint(페인팅)을 React가 부분화 하는 것으로 인식을 했었으나, 이는 렌더링 전체 과정에서 painting이 일부분이라는 사실을 간과한 오해였다. 페인팅은 정확히 말하자면 실제 돔(Real Dom)을 바탕으로 하여 브라우저가 수행하는 작업이다. 따라서, 만약 실제 돔이 부분적으로만 변경이 된다면, 브라우저 또한 부분적으로 페인팅.. 즉 자체.. 더보기 정글[Week_04]: React가 렌더링 비용을 획기적으로 절약한 방법 렌더링이란 무엇인가?보통 렌더링(Rendering)이라 하면 코드와 같은 컴퓨터 내부의 데이터를 사람이 볼 수 있도록 가시적인 이미지, 영상 등으로 변환하는 작업을 말한다. 이 렌더링이라는 단어는 다양한 곳에서 사용되고 있는데, 웹 분야에서도 단어의 의미에 맞게, HTML/CSS 등 코드들을 읽어 우리가 볼 수 있는 웹 페이지로 바꾸는 작업을 의미한다.렌더링 과정은 위의 이미지를 참고하면 좋다. 모두 당장 정확히 이해하기 보다는, HTML, CSS 등 문서를 DOM으로 만들고, 이를 몇몇 과정을 거쳐 최종적으로 화면에 그린다(paint). 문제는, 이 과정을 거치는데 상당한 비용을 소비한다는 점이다. 초창기 SSR 렌더링 방식은, 매 서버에다가 요청할 때마다 페이지 전채를 새로 그려야 했다(리렌더링). .. 더보기 이전 1 다음
