React 19 의 새로운 Hook

useTransitionUI 를 차단하지 않고 상태를 업데이트 할수 있는 React Hook 을 말합니다. React19 version 에서는 비동기처리도 우선순위를 줄 수 있게 변경이 됩니다.원래 useTransition 은 수많은 state 가 존재할 경우 우선순위를 주기 위해서 탄생했습니다.예를 들어, 사용자가 검색어를 입력하면 결과를 가져오는 작업이 있는데, 결과를 가져오는 동안 앱이 멈춘 것처럼 보이는 문제를 사전에 방지해 줍니다. 쉽게 말해 긴급한 작업과 덜 긴급한 작업의 UI 가시성을 처리하고 싶을 때 사용합니다.import React, { useState } from "react";const Transition = () => { const [number, setNumber] = useSt..

• format_list_bulleted React
• · 2025. 1. 20.
• textsms

React 에러 핸들링

React에서 에러 핸들링은 사용자 경험을 향상시키기 위해 매우 중요합니다.특히, 애플리케이션이 크거나 복잡할수록 예상치 못한 에러가 발생할 가능성이 커지므로, 이를 적절히 처리해야 사용자에게 불필요한 불편을 줄일 수 있습니다. JS Error 객체Error: 기본적인 에러 객체SynTaxError: 문법이 틀렸을 때 발생하는 객체ReferenceError: 잘못된 참조를 했을 때 발생하는 객체RangeError: 숫자 변수가 범위를 벗어났을 때 발행하는 객체TypeError: 변수나 값의 타입이 예상과 다를 때 발생, 예를 들어, 숫자가 아닌 값에 대해 숫자 메서드를 호출할 때 발생HTTP 에러 코드 (서버와의 통신에서 발생하는 에러)React 애플리케이션이 API를 통해 서버와 통신할 때, HTTP ..

• format_list_bulleted React
• · 2024. 9. 10.
• textsms

메뉴 밑줄 슬라이딩 만들기

프로젝트를 개발 중 메뉴 밑줄 슬라이딩을자연스럽게 구현하고 싶어 정리해 보았습니다. 용어 설명메뉴 밑줄 슬라이딩을 구현하고 싶은데 어떻게 만들어야 할지 막막하다면 여기서 정리한 내용만 차근차근 읽어보시면어떻게 구현하고 어떤 방식으로 만들 수 있는지 이해하실 수 있습니다. 특정 메뉴로 이동하고 싶을 때 애니메이션을 적용하고 싶다면 offset 이라는 기능을 사용하시면 됩니다.그림에서 보시는 바와 같이 검정색 화면이 브라우저 화면이라고 가정해 봅시다.그럴 때 브라우저에서 내가 측정하고 싶은 요소와 브라우저 간의 거리를 확인하고 싶다면 offsetTop 을 이용하시면 됩니다. 이 기능을 이용해서 간편하게 구현하시면 됩니다.아래의 코드는 React 를 이용해서 구현한 코드입니다.아직은 tsx 로 넘어가지 않았으..

• format_list_bulleted React
• · 2024. 8. 26.
• textsms

React 에서 formData 다루기

React 에서 이진 형태의 이미지를 서버로보내기 위해서는 특별한 형태로 보내야 합니다. 왜 특별한 형태로 서버로 전송되는가?일반적인 텍스트 데이터는 문자열 형태로 이루어져 있어서, 데이터를 인코딩하고 디코딩하는 과정에서 문자 집합 및 특수 문자 등을 다루는 것이 비교적 간단하지만 이미지나 다른 바이너리 파일은 이진 형태로 이루어져 있습니다.  즉, 이 데이터는 텍스트가 아닌 이진 형태의 바이트로 구성되어 있습니다. 따라서 이진 데이터를 전송할 수 있는 특별한 형태의 인코딩이 필요합니다. 그래서 axios 에 이진 데이터를 전송할 때 도와주는 multipart/form-data 형식을 주로 사용하게 됩니다.  이 형식은 여러 종류의 데이터를 구분하여 전송할 수 있도록 도와줍니다. 간단한 용어 설명프론트에..

• format_list_bulleted React
• · 2024. 8. 21.
• textsms

useId

react 의 따끈따끈한 hook 을설명해 드리겠습니다. useIdReact 18 version 으로 출시된 따근따근한 hook 입니다. useId 는 고유한 id 를 만들고 싶을 때 사용하면 됩니다.function App() { const id = useId(); console.log(id); // :r0:}useId 는 input 의 label 로 사용하는 경우가 있습니다.아래 코드가 예시 코드 입니다.import { useId } from "react";function MyInput() { const id = useId(); return ( 이름 )}function App() { return ( )} 하지만 굳이 useId 를 왜..

• format_list_bulleted React
• · 2024. 8. 19.
• textsms

useLayoutEffect

useEffect 라는 hook 은 들어봤는데useLayoutEffect 는 무엇일까요??  useEffect vs useLayoutEffect React에서 컴포넌트의 생명주기를 관리하기 위해 useEffect와 useLayoutEffect를 사용합니다. 이 두 훅은 비슷해 보이지만, 실제로는 매우 다른 역할을 합니다. 왜냐하면 useEffect는 비동기적으로 실행되기 때문에, DOM이 업데이트된 후에 실행되기 때문입니다.반면에 useLayoutEffect는 동기적으로 실행되어, DOM이 업데이트되기 전에 실행됩니다.  간단한 useEffect 의 동작 원리useEffect는 비동기적으로 실행되며, 이는 이벤트 루프의 테스트 큐에 콜백이 쌓이는 방식으로 동작합니다.왜냐하면 useEffect 의 콜백이 ..

• format_list_bulleted React
• · 2024. 8. 13.
• textsms

React-throttle

설명Throttle는 성능 최적화를 위해 자주 사용되는 기법으로, 일정 시간 내에 함수 호출 횟수를 제한하는 데 사용됩니다.주로 스크롤, 윈도우 리사이즈, 버튼 클릭 등 빈번한 이벤트 핸들링에서 과도한 함수 호출을 방지하는 데 유용합니다.기본 동작 원리Throttle의 기본 원리는 주어진 시간 간격(delay) 내에서 한 번만 함수를 실행하게 하는 것입니다. 예를 들어, 스크롤 이벤트가 1초에 100번 발생해도, Throttle을 사용하면 지정된 시간 간격(예: 200ms)마다 한 번만 해당 이벤트 핸들러가 호출되도록 제한할 수 있습니다. Throttle vs DebounceThrottle: 일정한 간격으로 함수를 실행합니다. 주기적으로 실행되므로 이벤트 발생 간격이 불규칙해도 실행 시점이 일정하게 유지..

• format_list_bulleted React
• · 2024. 8. 12.
• textsms

React-Debounce

Debounce 란?개발을 하다 보면 너무 자주 호출되는 함수가 있다면 서버 비용이 너무 많이 들 수 있습니다.따라서 특정 이벤트가 여러번 발생한 경우 해당 이벤트 안에 함수가 일정 시간이 지나야 실행되고그 전에 이벤트에 의해 발생한 함수들은 없애주는 기능이라고 생각하시면 됩니다. 언제 사용할까?제가 사용하는 경우는 검색어 입니다.우리가 입력창에 새우 볶음밥 만드는 방법이라고 입력을 할 때 새우만 입력을 해도 새우에 관한 검색어 예시들이 밑에 나오는 모습을경험해 본 적이 있으실 것입니다. 그럴 때 만약 Debounce 를 적용하지 않는다면 해당 검색어 예시들을 찾기 위해 이벤트가 발생하고우리의 타자 속도가 너무 빠르다면 해당 이벤트는 ㅅ, 새, 새ㅇ, 새우 라고 입력할 때마다 이벤트가 발생해 서버에 비용..

• format_list_bulleted React
• · 2024. 8. 8.
• textsms