Custom Hooks 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다 상태관리 로직의 재활용이 가능한 경우 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있는 경우 FriendStatus 컴포넌트는 사용자들이 온라인인지 오프라인인지 확인하고, FriendListItem 컴포넌트는 사용자들의 상태에 따라 온라인이라면 초록색으로 표시하는 컴포넌트가 있다 이 두 컴포넌트는 정확하게 똑같이 쓰이는 로직이 존재한다 //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트 function FriendStatus(props) { const [isOnline, setIsOnline] = useState(nul..

useMemo는 hook이기 때문에 함수형 컴포넌트 안에서만 사용 가능 하다 useMemo 특정 값(value)를 재사용하고자 할 때 사용하는 Hook이다 이전 값을 기억해두었다가 조건에 따라 재활용하여 성능을 최적화 하는 용도로 사용된다. (특정 value를 재사용) /* useMemo를 사용하기 전에는 꼭 import해서 불러와야 합니다. */ /*value 를 인자로 받는 Calculator 컴포넌트*/ import { useMemo } from "react"; function Calculator({value}){ const result = useMemo(() => calculate(value), [value]); return {result} ; } value 는 일종의 값으로서, 이 값이 계속 바..

Virtual DOM 상대적으로 무거운 DOM에 비하여 React의 가상 DOM 객체는 실제 DOM 객체와 동일한 속성을 가지고 있음에도 “훨씬 가벼운 사본”이라고 표현할 수 있다 React는 새로운 요소가 UI에 추가되면 트리 구조로 표현이 되는 가상의 DOM이 만들어지고 요소의 상태가 변경이 되면 다시 새로운 가상의 DOM 트리가 만들어진다 이전의 가상의 DOM과 이후의 가상의 DOM의 차이를 비교 한 뒤 가상의 DOM은 실제 DOM에 변경을 수행할 수 있는 최상의 방법을 계산한다 실제 DOM은 최소한의 작업만 수행해도 렌더링을 할 수 있게되어 실제 DOM의 업데이트 비용을 줄일 수 있고 더 빠른 렌더링이 가능해진다 const vDom = { tagName: "html", children: [ { t..

초기의 방식을 사용하게 되면 변수 이름의 충돌 가능성, 많은 js 파일 다운로드로 인한 네트워크 부하, 수동적인 반복 작업 (파일, 이미지 압축 등) 같은 부작용이 발생하고 이를 보안하기 위해 번들링이 등장했다 번들링 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업을 뜻한다 코드의 모듈화 리소스 최적화 반복 작업의 자동화 Module 분리된 코드 조각,시스템을 이루는 논리적인 일부분 Bundling '묶는다'는 뜻, 기능별로 모듈화 했던 파일들을 하나로 묶어주는 작업을 말한다 Bundler 여러 개의 파일을 묶어주는 도구 Webpack, Borserify, Parcel 등이 있다 Webpack webpack은 현재, 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 번들러다. 대규모 유저에게 웹..