본문 바로가기

cs/react

 (16)
[React] Debounce vs useTransition 목차1. 개요2. debounce와 useTransition 비교개요앞에서 debounce와 useTransition를 통해 성능 최적화를 학습했습니다.특정 상황에서 debounce기법과 useTransition을 동작원리를 통해 성능이 개선된다는 이해했지만, 막상 다른 상황에는 어떤걸 적용하면 좋은지 약간의 혼동이 있어서 두 방법을 비교해서 정리하기로 했습니다.debounce와 useTransition 비교debounce기법과 useTransition 훅의 공통점은 무거운 동작을 나중에 또는 천천히 수행시켜주는 방법입니다.하지만 '느리게 만든다'라는 개념으로 이해했기 때문에 헷갈립니다. 하지만 목적은 분명히 다릅니다. debounce는 짧은 시간에 여러번 발생하는 이벤트를 묶어서 마지막 한번만 실행하..
[React] useTransition 목차1. useTransition이란2. 사용법useTransition리액트 18에서 추가된 훅으로, nonblocking방식으로 상태(state)를 업데이트 할 수 있게 해주는 훅입니다. nonblocking 방식이란?기존 리액트는 block 방식으로 상태를 업데이트하면 렌더링 작업이 실행됩니다. 해당 렌더링이 발생할때 사용자가의 인터렉션 처리가 지연되어 화면에서 버벅임과 같은 현상이 발생하게 됩니다.하지만, nonblocking 방식을 사용하게 된다면, 상태 업데이트를 낮은 우선순위로 낮추어 사용자의 인터렉션이 먼저 처리되고 이후에 상태가 업데이트되어 렌더링되도록 합니다.그 결과 버벅임과 같은 인터렉션 지연을 방지할 수 있게 됩니다. 인터렉션시스템 환경과 사용자 간의 상호작용ex) 키보드 입력, 마우..
[React] Debounce 목차1. Debounce란2. 구현3. 동작원리 Debounce란디바운스란, 사용자 입력 또는 빈번하게 API 호출이 발생하는 이벤트의 성능을 최적화시키기 위한 방법입니다. 즉, 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것입니다. 검색창에 검색어를 입력했을때 조회 api를 호출하는 경우 하나의 글자를 입력하는 이벤트마다 api호출이 된다면 네트워크 부담과 자원 부하가 클 것입니다. 하지만 debounce 기법을 사용한다면, 키워드를 모두 입력했을 경우에만 api를 호출 할 수 있도록 지연시킬 있습니다.구현debounce기법을 활용한 검색어 입력 예시입니다.import React, {useCallback, useEffect, useState} from "react";export defaul..
[JS] 화살표 함수 반환 규칙 목차1. 개요2. 비교개요프로젝트에서 화살표 함수를 헷갈렸던 경험을 정리하려고 합니다. 헷갈렸던 표현식은 아래와 같습니다.type ResponsePageDto = { hasNext: boolean content: []}// fetchFn() 반환 타입 ResponsePageDto1. () => (() => fetchFn())2. () => (fetchFn())3. () => fetchFn()4. () => {fetchFn()}비교() => (() => fetchFn())함수가 실행되면 fetchFn() 함수가 호출되는 것이 아니라 함수 자체(function 타입)를 반환하게 됩니다.예상타입 : ResponsePageDto 결과타입 : function 그렇기 때문에 해당 화살표 함수가 반환한 결..
[JS] Promise & async & await 목차1. JS의 비동기 처리 문제점2. Promise3. async4. await5. Promise.allJS의 비동기 처리 문제점자바스크립트는 단일 스레드이지만 브라우저의 Web APIs와 microstack queue, macrostack queue 그리고 이벤트 루프의 동작으로 인해 한번에 다양한 동작이 가능한것처럼 보입니다. JS의 비동기 동작에 대해서는 해당 글에서 알 수 있습니다. 비동기는 끝나는 시점을 예측하기 어렵고 비동기가 완료된 이후 어떻게 처리해줘야할지.. 즉, 비동기의 흐름을 예상하기 어렵습니다. 아래는 JS에서 비동기 작업시 겪을 수 있는 어려움의 예시입니다.function fantasticWorking() {...}function doMyWork() { //비동기 작..
[JS] JS의 비동기와 콜백 큐 목차1. 개요2. 비동기 동작 구성3. 비동기 동작 원리4. event loop와 microstack queue, macrostack queue개요react 애플리케이션 개발을 진행하기 앞서, async와 await 그리고 promise에 대해 알아보려고 합니다. 이러한 개념들은 JS에서 비동기 제어를 위한 것들이기 때문에 선행으로 JS의 비동기에 대해 먼저 배워보겠습니다. 자바스크립트(JS)는 단일 스레드 기반의 언어로 단 하나의 작업만 처리할 수 있습니다. 하지만 브라우저가 비동기 동작을 지원해주기 때문에 JS는 단일 스레드지만 한번에 다양한 일을 수행할 수 있게됩니다.비동기 동작 구성JS는 브라우저의 도움으로 단일 스레드임에도 불구하고 한번데 다양한 일을 할 수 있게 된다고 했습니다.이 동작의 핵심..
[React] React Router 목차1. React Router란2. Browser Router의 사용법3. URL 정보 받기React Router란리액트는 SPA(Single Page Application) 방식으로 동작합니다.여러 페이지를 사용해서 새로운 페이지를 로드해서 사용하는 방식(MPA)과는 다릅니다.새로운 페이지를 로드하는 것이 아니라, 페이지 안에서 필요한 데이터만 가져와서 화면을 구성하는 방식입니다.그렇기 때문에 URL이 변경되어도 페이지를 새로 고치지 않고 컴포넌트만 변경할수 있도록 설계되어있습니다. React Router는 리액트 애플리케이션에서 클라이언트 측 라우팅(Client Side Routing)을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 기본 HTML에서는 타입을 사용하면 페이지가 새로고침되면서 ..
[React] Zustand 목차1. Zustand란2. Zustand 사용법3. Zustand와 ReduxZustand란Zustand는 전역 상태 관리 라이브러리입니다. 상태를 직관적으로 조회 및 제어할 수 있고 보일러 플레이트 코드 양이 적어서 간단한 사용이 가능합니다. 또한 컴포넌트 외부에서도 전역 상태에 접근할수있고 Context API를 사용하지 않아도 되기 때문에 불필요한 리렌더링을 최소화 할 수 있다는 특징이 있습니다.Zustand 사용법zustand 사용법은 redux에 비해 간단합니다.store를 생성하고 사용할 상태와 함수를 정의하고, 외부에서 끌어다 쓰기만 하면 됩니다. store 생성 및 상태와 set함수 정의import {create} from "zustand/react";const useStore = cre..

티스토리툴바