min

1. React Lazy를 사용하는 이유? React Lazy를 사용하는 이유는 다음과 같다. 만약 다음과 같은 코드가 있다고 가정하자 import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "../pages/Home"; import Write from "../pages/Write"; import Chart from "../pages/Chart"; import SignIn from "../pages/SignIn"; import SignUp from "../pages/SignUp"; const Router = () => { return ( ); }; export default Router; 여기서 만약 매인페이지에 ..

오늘은 useTransition에 대해서 알아볼려고 한다. 1. useTransition의 탄생배경 : useTransition은 사실상 리엑트에서의 동시성의 구현하기 위한 도구라고 볼 수 있다. 2. useTransition의 구조 : useTransition은 2가지를 리턴하고 있다. isPending과 startTransiton이다. isPending : 현재 우선순위가 낮은 작업이 지연되고 있음을 알려주는 boolean 값이다. startTransiton : 우선순위를 낮게 잡을 함수를 래핑하는 함수이다.

오늘은 react concurrent mode 에 대해서 알아볼려고 한다. 1. react concurrent mode의 등장 배경 : react concurrent mode는 사실상 리엑트 아니 자바스크립트의 고유적인 성질로 인해서 나오게 되었다. 자바스크립트의 경우에는 싱글 스래드 기반으로 로직이 흘러간다. 이 말은 하나의 작업을 하고 있을 때 다른 작업을 중단 시킨다는 의미이다. 그리고 리엑트 역시 싱글 스래드 기반으로 로직이 흘러간다. 만약 이런 코드가 있다면 어떻게 작동할까? import { useState } from "react"; const TECOBLE = ["프", "론", "트", "엔", "드", "화", "이", "팅"]; function App() { const [input, s..

오늘은 Throttle, Debounce에 대해서 알아볼려고 한다. 1. Throttle, Debounce 의 탄생 배경 : Throttle, Debounce의 경우에는 DOM의 이벤트 조작을 최적화 시키기 위해서 탄생한 기술이다. 이 말을 이해하기 위해서 다음과 같이 예가 있다고 가정하자. 만약에 내가 스크롤을 할때마다 콘솔을 찍는 로직을 만들었다고 가정하자. 이 코드를 실행시킨다면 스크롤을 밑으로 내릴 때마다 콘솔이 찍힐 것이다. 만약 스크롤의 길이가 5000픽셀이라면 해당 스크롤에 대한 콘솔은 100개 이상이 찍힐 것이다. 이는 굉장한 리소스 자원 낭비이다. 그래서 우리는 이를 해결하기 위해서 Throttle, Debounce가 탄생하게 되었다. 2. Debounce에 대하여.. : 디바운스의 경우..

오늘은 useInfiniteQuery에 대해서 살펴보려고 한다. 즉 만약에 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할 점은? 이라는 질문에 하나의 방법이 될 수 있는 useInfiniteQuery에 대해서 살펴보려고 한다. 1. 만약에 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할 점은? : 위 답을 내리기 위해서는 먼저 무한 스크롤에 대해서 살펴봐야한다. 무한 스크롤에 경우에는 사용자가 스크롤을 맨 밑하단으로 내렸을 때 데이터를 계속 fetching을 해오면서 무한정 스크롤을 내릴 수 있도록 해주는 기술이다. 이 기술에서 중요한 부분은 어떻게 DOM을 최적화 시킬 것인가?이다. 즉 사용자 입장에서 무한정 스크롤을 밑으로 내릴 때 어떻게..

오늘은 react-query에 대해서 알아볼려고 한다. 정확히 말하자면 react-query가 무엇이고 왜 사용하는 지에 대해서 알아볼려고 한디. 1. react-query가 무엇인가? : react-query는 서버용 상태관리 툴이다. 여기서 서버용 상태라는 것은 클라이언트가 주도권을 잡고 있는 상태가 아니라 제3자 즉 데이터베이스에 있는 상태를 의미한다. 2. react-query를 왜 사용하는가? : react-query를 왜 사용하는지를 알기 위해서는 먼저 서버용 상태를 왜 관리해야 하는지를 먼저 알아야 한다. 서버용 상태는 클라이언트가 주도권을 잡고 있지 않다. 이 말은 즉 데이터베이스 서버에 저장되고 있고 만약 이를 관리하지 않는다면 클라이언트가 가지고 있는 서버 사이트 상태와 데이터베이스에 ..

오늘은 useEffect의 실행 순서에 대해서 알아볼려고 한다. 1. useEffect의 실행 순서에 대해서 useEffect의 실행 순서는 리엑트의 생명 주기와도 관련이 깊다. 여기서 생명 주기는 크게 3가지로 나눌 수 있다. (1) 마운트가 될 시에 useEffect는 무조건 마운트가 될 시에 콜백함수를 실행시킨다. useEffect에는 의존성 배열이 있는데 이때 의존성 배열에 값을 넣지 않는 경우 useEffect를 마운트가 될 시에"만" 실행시킨다. (2) 업데이트가 될 시에 useEffect는 마운트가 될 시에 한번 실행하고 업데이트가 될 시에도 콜백함수를 실행시킬 수 있다. 이때 실행시키는 방법은 useEffect에 의존성 배열에 값을 넣는 경우에 useEffect를 해당 값이 업데이트가 될때..

오늘은 useRef에 대해서 알아볼려고 한다. 정확하게는 useRef가 무엇인지에 대해서 알아볼려고 한다. 1. useRef가 무엇인가? : useRef는 리엑트에서 제공하는 훅으로 크게 2가지의 기능을 가지고 있다. 첫번째는 DOM에 대한 참조 , 두번째는 값의 저장이다. 1-1) DOM의 대한 참조 : react에서 DOM에 직접적으로 참조를 하는데 사용하는 훅으로 getElementById와는 다음과 같은 차이점이 있다. getElementById는 리엑트와의 통합을 제공하지 않는다. 이 말은 useRef는 React 컴포넌트의 생명 주기와 통합되어 컴포넌트 리렌더링에 영향을 받지 않는다. 반변 getElementById의 경우 컴포넌트 리렌더링에 영향을 받는다. 1-2) 값의 저장 : useRef..