🎬 혹시 이런 경험, 한 번쯤 해보시지 않았나요?수천 개의 아이템이 쌓인 리스트를 스크롤하는 순간, 화면이 "뚝뚝" 끊기는 경험.아니면 지도 위에 수많은 마커를 찍는데, 드래그 한 번에 브라우저가 멎는 듯한 느낌. 이런 상황을 마주할 때마다 개발자는 보통 이렇게 되뇌이게 될겁니다..."분명 코드는 똑같이 돌아가는데, 왜 사용자는 답답함을 느낄까?" 사용자는 프레임 드롭 한 번에 "이 서비스 좀 별로네"라고 느낍니다.60fps, 즉 16.67ms라는 아주 짧은 약속을 지키지 못하는 순간, UX는 무너지죠.그리고 이 약속을 지키기 위해, 리액트는 2017년 자신의 심장이라 부를 수 있는리콘실러(Reconciler)를 통째로 갈아엎는 결단을 내렸습니다. 그 결과물이 바로 파이버 아키텍처(Fiber Archi..

ReactFacebook에서 개발된 오픈소스 라이브러리이며CSR 웹페이지를 개발할 때 주로 사용된다. 컴포넌트 단위로개발할 수 있어 유지보수, UI 재사용성을 높여 효과적으로 웹페이지를개발, 운영할 수 있다. React의 주요 특징1. Virtual DOM, 동적인 웹페이지 구성React는 메모리에 Virtual DOM(가상돔)을 생성하고 이를 활용하여 이벤트가 발생할 때 마다 실제 DOM과 상태를 비교하여 변경이 필요한 최소한의 변경 사항만 실제 DOM에 반영하여 렌더링되기 때문에 렌더링 효율성이 좋다. 이러한 특징으로 유저와 상호작용하는 동적인 웹페이지 개발 시 자주 채택된다. 2. Data FlowData Flow(데이터 방향)는 한 방향으로 흐르는 단방향이다. 데이터흐름이 양방향인 경우 어플리케이..

# useScroll의 기능 import {useEffect, useState} from "react";export const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({ y: window.scrollY, x: window.screenX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); ..

# useNetwork의 기능 import {useEffect, useState} from "react";export const useNetwork = (onChange) => { const [status, setStatus] = useState(navigator.onLine); const handleChange = () => { if (typeof onChange === "function") { onChange(navigator.onLine); } setStatus(navigator.onLine); }; useEffect(() => { window.addEventListener("online", handleCha..

# useInput의 기능 import {useState} from "react";export const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onChange = event => { const { target: {value} } = event; let willUpdate = true; if (typeof validator === "function") { willUpdate = validator(value); } if (willUpdat..