Front-End/React

Suspense

✔️ React 18에서 추가된 Suspense에 대해 살펴보자 Suspense란?fallback 컴포넌트를 로딩이 끝날 때 까지 보여주는 기능이다.사실 Suspense는 React 16.6 버전에서 실험적으로 도입된 기능이었다.기존의 한계Next.js에서 사용할 수 없었다. → (React 18) Next.js에서도 사용할 수 있게 되었다.컴포넌트가 마운트가 되기 전에 effect가 실행되는 문제가 발생했다. → (React 18) 컴포넌트가 화면에 실제로 노출될 때 effect가 실행된다.이전에는 컴포넌트가 스스로 Suspense에 의해 보여지고 있는지 없는지 알 방법이 없었다. → (React 18) Suspense로 인해 컴포넌트가 보이거나 사라질 때도 effect가 정상적으로 실행이 되는 방식으..

자동 배치(Automatic Batching)

✔️ React 18에서 추가된 자동 배치(Automatic Batching)에 대해 살펴보자 리액트에서 항상 관심을 가지는 있는 주제는 바로 상태를 어떻게 업데이트 할 것인가 이다. useTransition이나 useDeferredValue 같은 훅들도 어떻게 하면 상태를 잘 업데이트할 수 있을까에 대한 고민에서 나온 기능이라고 볼 수 있다. 리액트 컴포넌트에서는 하나의 상태만 가지고 있기 보다는 두 개 이상의 상태를 가지고 있는 경우가 훨씬 더 많다. 이러한 경우 상태가 하나씩 업데이트가 될 때마다 컴포넌트는 리렌더링을 수행하게 된다. React 트리가 깊고 복잡해질수록 다루는 상태가 많아지게 되고 리렌더링 횟수가 기하급수적으로 늘어나게 되는 문제가 발생한다. 이러한 문제를 해결하기 위해서 나온 기능..

React v18

React 18 버전에 대한 소개✔️ React 18 버전에 대해 알아보자→ 24년 4월 25일 React 19 베타 버전이 출시되었지만 아직 정식으로는 출시되지 않았기 때문에 지금은 18버전에 대해 알아보고 추후에 19버전에 대해 알아보자! React 18 공식 문서React v18.0 – React React v18.0 – ReactThe library for web and native user interfacesreact.dev 가장 중요한 내용은 동시성을 지원한다 즉, UI에 여러가지 버전이 한꺼번에 존재를 하는데 이러한 버전들을 동시에 보여주는 것을 동시에 보여주는 것을 가능하게 하는 것이 동시성이다이러한 동시성은 외부에서는 잘 보여지지 않지만 리액트 팀에서 내부적으로 구현을 할 때 이 개념을 ..

React 동작 방식

💡 Vanilla Javascript로 DOM을 그릴 때와 React로 DOM을 그릴 때에 대해 간단히 짚어 보자 (1) Vanilla JS로 만든 간단한 카운터 예제 이해를 돕기 위한 코드로 destroy에 대한 부분은 정의하지 않고 간단하게 만들었다. DOM을 그리는 부분은 다양하게 구현이 가능하다. (insertAdjacentHTML, innerHTML 등) 0 Increment Decrement const counterElement = document.getElementById('counter'); const incrementButton = document.getElementById('incrementButton'); const decrementButton = document.getElementB..

엑셀 다운로드

이번에 회사에서 관리자 페이지를 구현하다가 요구사항이 들어왔다. 바로 목록 즉, 다양한 데이터들이 들어있는 테이블을 엑셀 파일로 다운로드 할 수 있게 구현해 달라였다. 엑셀 다운로드는 처음 구현하다 보니 방법이랑 코드를 정리해 볼려고 한다. React를 이용한 엑셀 다운로드 구현하기 라이브러리 설치 yarn add xlsx or npm i xlsx import import * as XLSX from "xlsx"; 다운로드 할 데이터 생성 // promotionAppliedData로 다운로드 하고 싶은 부분만 다시 세팅 const filterDataToDownload = useMemo(() => { return promotionAppliedData?.map((res: PromotionAttriProps) ..

useSWR vs React(TanStack) Query를 비교해보자

원문 : https://codedamn.com/news/javascript/useswr-vs-react-query-differences-and-which-one-should-you-choose https://blog.logrocket.com/swr-vs-tanstack-query-react/ https://tech.madup.com/react-query-vs-swr/ https://sihyungyou.github.io/iOS-race-condition-in-swift/ 많은 라이브러리를 통해 React에서 데이터를 가져올 수 있지만 현재 가장 인기 있는 두 가지는 바로 SWR / Tanstack React Query이다. 이 두 라이브러리는 얼핏 비슷해 보일 수 있지만 몇 가지 중요한 차이점이 있다. u..

API를 호출할 때 useState 대신 useSWR을 사용해야 하는 이유

원문 : https://javascript.plainenglish.io/why-you-should-use-useswr-instead-of-usestate-when-calling-apis-8b6de5dc18fc https://velog.io/@ysg81/React-useSwr-사용하기 https://github.com/vercel/swr https://swr.vercel.app/ko/docs/revalidation SWR이란 무엇인가? SWR(State While Revalidate)은 서버에서 데이터를 가져오는 데 사용되는 React 후크이다. useState와 useEffect를 사용하지 않고 실시간 데이터를 fetch, 캐싱 또는 re-fetch 할 수 있다. SWR은 캐시에서 데이터를 제공한 다음 ..

[React] useEffect와 sideEffect

useEffect란? React에서 제공하는 useEffect()는 sideEffect를 처리하기 위해 사용한다고 한다. 리액트의 순수한 함수적인 세계에서 명령적인 세계로의 탈출구라고 생각하면 된다. 즉, 렌더링 이외에 일으켜야하는 sideEffect를 일으킬 탈출구라고 보면 된다. sideEffect를 렌더링 이후에 발생하며 업데이트 된 정보가 있어 새롭게 화면에 그려야할 경우 새롭게 렌더링을 일으킨다. SideEffect란? sideEffect란 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 sideEffect라 한다. 즉, 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 예를들어 함수에서 전역변수의 값을 변경하거나 혹은 함수 외부에..

[React, JS] 비동기 동기 처리

동기 (Syncronous)와 비동기 (Asynchronous)는 프로그래밍 언어에서 중요한 개념이다 동기 동기는 요청 후 응답을 받아야 다음 동작을 실행하는 방식을 말한다. 즉, 요청과 결과가 동시에 일어나기 때문에 코드가 직관적이고 이해하기 쉽다. 코드가 짜여진 순서대로 실행된다. 비동기 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식이다. 즉, 결과가 나올 때 까지 기다리지 않고 다른 일을 처리할 수 있기 때문에 코드나 순서는 이해하기 어려워도 자원 사용을 좀 더 효율적으로 할 수 있다. 코드가 짜여진 순서대로 실행되지 않는다. 자바스크립트에서 동기와 비동기 자바스크립트는 단일 스레드 프로그래밍 언어로 단일 호출 스택이 있어 한 번에 하나의 일을 처리할 수 있다. 그러므로 자바스..

[React] 상태관리 (Local State, Global State, Cross Component State)

https://dev.to/oahehc/redux-data-flow-and-react-component-life-cycle-11n Redux Data Flow and React Component Life Cycle Almost everyone who wants to learn Redux had seen this image before. It's pretty straight forward fo... dev.to 현대 웹 개발의 흐름은 단순한 웹 페이지를 넘어 웹 애플리케이션을 구축하는 방향으로 나아가고 있다. 이제 브라우저는 단순히 정적인 페이지를 렌더링하는 도구가 아니라. 하나의 애플리케이션의 운영을 돕는 작은 규모의 OS라고 볼 수 있다. 웹 프론트엔드는 앱 여러 부분에서 각 요소의 상태를 관리해야 한..