리액트

React의 내장 훅 중 하나인 useContext를 이해하기 위해 쓰는 글 React 공식 문서는 아래와 같이 설명한다. useContext is a React Hook that lets you read and subscribe to context from your

저번 React의 내장훅인 useRef에 이어 useReducer 이해하기 위해 쓰는 글 먼저 useReducer에 대해 알아보자 useReducer is a React Hook that lets you add a reducer to your component.출처:

리액트 내장 훅인 useRef에 대한 이해가 더 필요하다고 생각이 들어 공부하며 쓰는 글 React를 이용하여 useEffect, useState는 수도 없이 잦은 사용을 하고 있다! 하지만, 상태 관리 라이브러리를 사용하여 전역 상태를 관리하는 등의 이유로 use

Error Boundary란 무엇이고 어디서 어떻게 쓰여지는지 궁금해서 찾아보며 이해하는 글에러 경계는 컴포넌트 트리가 깨지는 대신 자식 컴포넌트 트리에서 에러를 잡아내고, 이러한 에러의 로그를 남기고, 폴백 UI를 보여주는 React 컴포넌트입니다. 에러 경계는 렌더

React의 lazy와 Suspense를 이해하기 위해 쓰는 글리액트에서 제공하는 기술 중에는 lazy가 있다.이 lazy란 어떤 걸 구현하게 해주는 기술일까?필요할 때만 컴포넌트, 이미지, 데이터 같은 리소스들을 로드하여 초기 로딩 속도를 개선해 성능 최적화하는 기술

React Query를 사용하면서, get이 아닌 post, update, delete 요청 관리를 어떻게 할 수 있을까를 알아보며 이해하는 글 프로젝트를 진행하며 사용하고 있는 리액트 쿼리서버로 get 요청 및 상태 관리를 하기 위해 useQuery는 써봤지만..서버

Tanstack Query의 v5부터 useQuery의 onSuccess, onError, onSettled가 사라졌다v4버전까지는 useQuery로 데이터를 받아올 때 onSuccess와 onError 그리고 onSettled도 받을 수 있어서 각자의 상태일 때를

Tanstack Query (React Query)의 useQuery에 대해서 알아보자이 라이브러리는 비동기 상태 관리를 더욱 효율적으로 할 수 있게 도와준다. 이는 서버의 상태, 데이터 캐싱, 동기화 및 업데이트를 효과적으로 다룰 수 있게 해준다. 간단하게 몇 가지

자동완성 검색창 구현을 위해 사용해본 MUI의 AutoComplete를 알아보자 MUI는 React 기반의 UI 컴포넌트 라이브러리이다. 현재 내 토이 프로젝트에서의 프론트는 리액트의 환경에서 개발하고 있기에 함께 사용하면 좋을 거 같았다. 한국어로는 아니지만 영어로

현재 이용 중인 페이지가 멈추지 않고 로딩 중이라는 건 어떻게 보여줄까?지금 토이 프로젝트를 진행하면서, 식당 정보 데이터를 가져오는데 생각보다 시간이 좀 걸린다데이터를 가져오는 동안, 사용자가 데이터를 불러오는 중이라는 사실을 알고 조금 기다려주길 바란다 빠른 네트워

네이버 블로그에 적었던 내용을 옮기는 글 영문 뉴스 오픈 API를 사용해서, 뉴스를 패치하고 검색창과 캘린더를 삽입하여 필터링을 하는 기능 구현을 한번 해보려고 시작! "먼저 검색창부터 넣어보자" input에 클릭했을 때, 겉에 보이는 하이라이트 색상이 뜨는게

네이버 블로그를 옮기는 글React Portal를 이용해서 모달창을 만들어보자공부 한 적은 있지만, 실제로 적용해서 사용해보기는 처음이다시작하기에 앞서, index.html에 portal로 갈 수 있는 태그를 루트 내에 생성하여 id를 줬다 (여기에서는 overlays

1\. React Query와 Intersection Observer API를 사용하여 프로젝트에 무한 스크롤링 구현해보기무한 스크롤링을 구현하고 싶은데 어떻게 할 수 있을까?현재, 진행 중인 프로젝트에서는 리액트 쿼리의 useQuery를 이용해서 비동기 상태 관리를

성능 최적화를 위해 리액트에서 할 수 있는 것 중의 하나인 memoization, 그를 이용한 React.memo와 useMemo에 대해 알아보자: 컴포넌트나 함수의 연산 결과를 캐싱(caching)해 동일한 입력에 대해 반복 연산을 하지 않고, 이전에 계산된 결과를

React를 사용하다보면 접하게 되는 cocurrent mode에 대해 파헤쳐 보자 2022년에 나온 React 18에서 등장한 Concurrent Mode (동시성 모드)는 무엇일까? 오늘은 이 개념에 대해 알아보도록 하자. 리액트의 동시성 모드란? > : UI

React를 다루다보면 Fiber라는 개념에 대해 한번씩 지나본 적이 있을 것이다. 이게 뭔지 같이 알아보자!: React에서 Fiber는 리액트 16버전부터 도입된 새로운 reconciliation 알고리즘 및 내부 아키텍처를 의미한다. Reconciliation이란

오늘은 React 18에서 도입되었던 Server Components에 대해서 파헤쳐보자!: UI 컴포넌트를 서버에서 렌더링해 클라이언트로 전송하는 방식 (서버와 클라이언트 역할을 나눠서 빠르고 효율적인 애플리케이션 개발 가능)이 Server Components는 서버

오늘은 INP는 무엇인지 그리고 어떻게 React 환경에서 최적화 할 수 있는지에 대해 알아보자! : 웹사이트에서 사용자의 클릭, 탭, 키 입력 등(사용자 인터렉션)이 발생한 후에 다음 화면이 렌더링 될 때까지 걸리는 시간을 측정하는 웹 성능 지표를 의미한다.(사용자의

공식적으로 지원 종료가 선언된 CRA! 어떤 기능들을 지원해왔고, 어떤 것들이 대체할 수 있는지 알아보자 2025년 2월 14일, 리액트 공식 블로그에 올라온 글에 의하면Create React App은 더이상 지원이 되지 않을 것이며(deprecated) 새로운 프로젝