분류 전체보기229 Virtual DOM이란 무엇일까? 1. Virtual DOM이란 무엇일까? Virtual DOM(가상 DOM)은 React, Vue 등의 같은 라이브러리에서 사용되는 개념으로, 웹애플리케이션의 성능 향상과 효율적인 UI 업데이트를 위한 기술이다. 일반적으로 브라우저는 실제 DOM(Document Object Model)을 사용하여 웹 페이지의 구조를 표현하고 조작하는데, DOM은 HTML 문서의 요소들을 트리 구조로 표현하고, Javascript를 사용하여 동적으로 조작할 수 있다. 그러나 DOM 조작은 비용이 높은 작업 중 하나로, DOM이 직접 변경될 시 사소한 변경사항에도 전체가 리렌더링 되기 때문에 웹 애플리케이션이 복잡해지고 대규모로 확장될수록 성능 문제가 발생할 수 있다. Virtual DOM은 이러한 성능 문제를 해결하기 위.. 2024. 2. 5. [React] React의 이벤트 핸들러 이벤트 핸들링은 사용자의 상호작용에 대응하기 위해 필수적이다. 사용자가 버튼을 클릭해서 API 요청을 하거나, 여러 동적인 동작을 발생시키기 위해 이벤트를 사용하는데, React에서 이벤트는 SyntheticEvent 라는 객체로 감싸져서 제공된다. SyntheticEvent는 브라우저의 네이티브 이벤트를 감싼 React의 크로스 브라우저 호환성을 제공하는 래퍼이다. SyntheticEvent는 브라우저간의 일관성을 유지하면서 React 이벤트 시스템을 추상화한다. 이벤트 핸들러는 이 SyntheticEvent객체를 매개변수로 받아서 사용한다. 이렇게 브라우저 이벤트를 감싼 SyntheticEvent는 이벤트의 표준 속성들을 대부분 사용할 수 있다. 1. 함수형 컴포넌트 JSX 내에서 이벤트 함수 전달 .. 2024. 2. 2. [React] React에서 HOC(High Order Components)란? 1. HOC(High Order Components) 란? Higher Order Component (HOC)는 React에서 사용되는 디자인 패턴 중 하나로, 컴포넌트 간의 로직을 재사용하고 추상화하기 위한 방법이다. HOC는 함수로 구현되며, 기존의 컴포넌트를 props로 받아서 감싼 후 새로운 컴포넌트를 리턴한다. HOC를 잘 사용하면 컴포넌트 간에 공통된 로직을 추상화하여 코드의 재사용성을 높이고 모듈성을 향상 시킬 수 있다. 나는 작년에 진행했던 프로젝트에서 HOC를 인증토큰이 필요한 페이지 즉 권한이 없이는 접근할 수 없는 페이지를 감싸는 데에 사용했다. (예: 마이페이지, 구매내역 등) 아래는 예시로 작성한 component 코드이다. import React, { useState } from.. 2024. 2. 1. [React] React에서 Custom Hooks란? 1. Custom Hooks이란? React에서 useEffect, useRef 등의 hook이 있듯이 React 개발자 스스로 Custom Hook을 만들어서 사용할 수 있다. Custom Hook은 기능을 재사용하기 위해 사용되는 함수입니다. Custom Hook은 보통 useState, useEffect 및 다른 React hook을 사용하여 상태 또는 행위를 추상화하고, 이를 컴포넌트 간에 공유할 수 있도록 도와준다. Custom Hook은 "use"라는 접두어로 시작해야 한다. 이는 hook으로 인식될 수 있게, 더 나은 코드 가독성을 제공하는데 도움이 된다. 2. Custom Hooks를 사용하는 이유 개발을 하다보면 비슷하게 생긴 코드를 파일마다 똑같이 작성하는 경우들이 생긴다. 그렇게 중복.. 2024. 1. 31. [React] 함수형 컴포넌트의 생명주기 1. 함수형 컴포넌트의 생명주기 구현 리액트에서 컴포넌트의 생명주기란? 컴포넌트가 생성되고 제거되는 과정동안 일어나는 여러 단계를 말한다. 함수형 컴포넌트에서 생명주기와 관련된 작업을 처리하기 위해서는 원래는 별도로 구현했었어야 했지만, React 16.8 버전 이후로부터 Hook이 도입되고 나서 React Hook인 useEffect를 통해 손쉽게 구현하는 것이 가능해졌다. 리액트 공식문서에서 useEffect는 클래스형 컴포넌트의 생명주기 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount를 결합한 기능이라고 소개하고 있다. useEffect를 통해 Mounting, Updating, Unmounting 처리를 할 수 있는 것이다. 2... 2024. 1. 30. [React] useEffect와 useLayoutEffect 1. useEffect와 useLayoutEffect는 각각 무엇일까? useEffect와 useLayoutEffect 모두 React의 hook인데, 이 둘 모두 비동기 작업 또는 side effect를 처리하기 위해 사용되는 hook이다. 그렇기 때문에 비슷해보이지만 각각의 특징과 차이점이 있다. 2. useEffect와 useLayoutEffect의 차이점 useEffect의 경우 useEffect는 렌더링 후에 실행되는 함수이다. DOM의 Layout 렌더와 Paint가 종료된 후 호출되는 이펙트 함수이다. 렌더 -> 페인트 -> useEffect 순으로 실행되며, DOM이 그려진 후 useEffect의 callback 함수들이 실행되며 리렌더링이 실행된다. 이 1) 비동기 처리에 적절 useEf.. 2024. 1. 29. 이전 1 2 3 4 5 6 7 8 ··· 39 다음
