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..