React/이론21 [React] DOM vs Virtual DOM DOM 앞서 브라우저의 렌더링 과정을 통해서 Repaint와 Reflow가 브라우저 렌더링 중 리소스를 가장 많이 잡아먹는 연산이라고 배웠다. 일반적인 소개 페이지와 같은 정적인 웹 애플리케이션이라면 DOM이 더 좋은 성능을 나타낸다. 하지만 문제는 복잡한 SPA에서는 DOM 조작이 많이 발생한다는 것이다. Repaint와 Reflow가 빈번하게 발생하는 웹사이트에서는 UI/UX 렌더링에 비교적 많은 리소스를 잡아먹기 때문에 전체적인 프로세스를 비효율적으로 만든다. Virtual DOM Virtual DOM은 Reflow와 Repaint를 줄여서 브라우저 레이아웃 엔진의 성능에 최적화를 시켜준다. 이게 어떻게 가능할까? 먼저 브라우저에 렌더링을 한 후에 Virtual DOM을 하나 만듭니다. 그리고 변화.. 2022. 11. 8. [React] 렌더링 이전에 브라우저의 렌더링이 어떤 방식으로 이루어지는 지 알아봤다 이번에는 React에서의 렌더링을 알아보자! 클래스 컴포넌트에서의 LifeCycle에 대한 이미지를 가지고 왔다. ComponentDidUpdate, DidMount 등등은 우리가 많이 알고 있는 익숙한 것들이다. 하지만 옆에 Render Phase, Commit Phase에 대해서는 특별하게 들어본 적이 없다. React에서의 Render Phase와 Commit Phase가 무엇인지 알아보자 Render Phase 간단하게 말하자면 컴포넌트 함수를 호출해서 React의 Element를 반환하고 새로운 Virtual DOM을 만들어준다. 그리고 최초 렌더링이 아니라면 재조정을 통해서 실제 DOM에서 적용할 변경점을 확인한다. 재조정 ( R.. 2022. 11. 7. [React] 브라우저의 렌더링 과정 브라우저에서는 Reflow와 Repaint 작업을 진행한다. 이 둘은 웹 애플리케이션의 성능을 떨어뜨리는 주된 요인인데, 한번 천천히 알아보자 DOM Tree HTML을 전달 받은 브라우저는 렌더 엔진에서 이를 파싱하고 DOM 노드로 이루어진 트리인 DOM Tree를 만들어낸다. Style Rules 이어서 외부 CSS 파일과 엘리먼트의 inline 스타일을 파싱해서 메모리 상 Style Rules을 생성한다. Render Tree DOM Tree와 Style Rules을 바탕으로 실제 브라우저 화면에 노출되는 노드에 대한 정보를 가진 Render Tree를 만들어준다. 이때 태그나 display 속성이 none인 태그들과 같이 보이지 않는 노드는 Render Tree를 생성할 때 제외하고 생성된다. L.. 2022. 11. 6. [React] Custom Hook React를 사용하다보면 높은 확률로 ( 거의 무조건 ) Hooks를 마주하게 될 것이다. 당연하게 본인도 React를 사용하면서 Hooks를 아주 애용하면서 잘 사용하고 있다. 이런 Hooks의 핵심? 장점?이 바로 Custom Hook를 만들어서 사용할 수 있다는 것이다. 이미 사용하고 있는 useState, useEffect ... 등은 Rules of Hooks ( 훅의 규칙 ㅋ )만 지켜주면 문제없이 사용할 수 있습니다. 그렇다면 Custom Hook도 마찬가지로 해당 규칙만 지키면 될까요? 또 어떤 경우에 Custom Hook을 만들면 좋을까요? useInput function useInput () { const [state, setState] = useState(""); const onCha.. 2022. 10. 22. [React] Redux 들어가며. 이 글은 최대한 Redux의 공식 홈페이지를 토대로 Redux를 정리 및 이해하려고 한다. 동기. 자바스크립트 싱글 페이지 애플리케이션이 갖추어할 요건이 점점 더 복잡해지고있는 만큼, 어느 때보다도 많은 상태를 자바스크립트 코드로 관리할 필요가 생겨났습니다 상태에는 서버 응답, 캐시 데이터, 지역적으로 생성해서 사용하고 있지만 아직 서버에 저장되지 않은 데이터를 의미 실제로 프론트엔드를 개발하다보면 생각보다 많은 곳에서 State를 사용해야한다. 예를들어, 작은 모달창을 화면에 나오게 하기 위해서도 isModal 과 같은 상태를 만들어준다. 항상 변하는 상태를 관리하기란 어렵습니다... 상태를 언제, 왜, 어떻게 업데이트할지 제어할 수 없는 지경에 이르고 맙니다. 그렇다. 부모 컴포넌트에서 자.. 2022. 10. 14. [React] Flux Flux? Flux는 페이스북에서 클라이언트 사이드 웹 애플리케이션을 만들때 사용한 애플리케이션 아키텍쳐이다. 단방향 데이터 흐름을 활용해서 뷰 컴포넌트를 구성하는 리액트를 보충해주는 역할을 합니다. 구조와 데이터 흐름 Flux에서의 데이터는 앞에서 말한 것처럼 단방향으로 흐른다. view는 사용자의 상호작용에 따라 응답을 위해서 새로운 Action을 만들어서 다시 전파를 하게 된다. 이렇게보면 단방향(?)이라는 부분이 이해가 안될 수 있지만, 결국 Action은 대부분의 상황에서는 View의 사용자 상호작용으로 Action이 발생하게 된다. 모든 Action은 Dispatcher에게 가게 되는데, Dispatcher는 Store에 적용하기 위한 콜백을 실행한 다음 결과를 Store에 전달한다. Stor.. 2022. 10. 13. [React] Redux - toolkit편 Redux Toolkit? Redux Toolkit은 Redux 팀에서 세 가지 걱정을 해결하기 위해서 등장했다. 1. Redux 스토어 환경 설정이 너무 복잡하다. 2. Redux를 쉽게 사용하기 위해선 추가로 패키지들을 설치해야 한다. 3. Redux는 많은 보일러플레이트 코드를 요구한다. 즉, Redux Toolkit은 Redux로 개발하는 과정을 단순화하여 흔한 실수를 방지할 수 있게 해 준다. ※ 보일러플레이트 코드? 최소한의 변경으로 여러 곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다. Redux Toolkit 사용법 Redux Toolkit API는 크게 7가지가 있다. 1. configureStore Redux의 createStore 함수와 유사한 함수이다. Reducer.. 2022. 7. 22. [React] Redux - 기본편 Redux는 React에서 가장 많이 사용되고 있는 상태 관리 라이브러리 중 하나이다. 최근에는 Redux Toolkit이 새롭게 생긴 김에 다시 정리해본다. Redux의 주요 개념들 1. Action ( 액션 ) 상태가 변화가 필요할 때, 액션이 발생된다. { type: 'TOGGLE_MODAL', data: { // ... } } 객체로 되어 있으며, type 속성은 반드시 필요하며, 액션을 구분하는 용도로 사용한다. 2. Action Creator ( 액션 생성 함수 ) 액션 객체를 만들어주는 함수이다. export const toggleModal = (data) => { return { type: "TOGGLE_MODAL", data, } } 액션 생성 함수를 만들어서 사용하는 이유는 쉽게 컴포넌.. 2022. 7. 21. [React] MobX - 심화 슈퍼마켓 구현하기 MobX를 깊게 다루기 위해서 슈퍼마켓을 추상적으로 구현하려고 한다. market 스토어 작성 import { observable, action, computed, makeObservable } from "mobx"; export default class MarketStore { selectedItems = []; constructor() { makeObservable({ selectedItems: observable, put: action, take: action, total: computed, }); } put = (name, price) => { const exists = this.selectedItems.find((item) => item.name === name); if (!e.. 2022. 5. 5. 이전 1 2 3 다음 반응형
