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) ..

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은 캐시에서 데이터를 제공한 다음 ..

[Typescript] 타입스크립트란?

이제는 프로젝트를 진행하면서 항상 타입스크립트 문법으로 구현했지만 블로그를 한 번도 쓰지 않았다. 더 늦기전에 타입스크립트에서 하나 둘씩 정리해서 써 볼려고 한다. Typescript란? 타입스크립트는 마이크로소프트에서 개발한 오픈소스 프로그래밍 언어이다. 자바스크립트에 타입을 부여한 언어로 자바스크립트의 확장된 언어이다. 대규모 애플리케이션을 개발하는데 자바스크립트가 어렵고 불편하다는 불만에 대응하기 위해서 개발되었다. 자바스크립트는 동적 타입 언어(dynamic type language) 이기 때문에 런타임 속도는 빠르지만 타입 안정성이 보장되지 않는다. 여기서 타입 안정성이란 값의 종류가 잘못 전달될 경우 버그를 잡기 어렵다는 것을 의미한다. 타입스크립트는 정적 타입 언어(static type la..

[NextJS] Hydrate?

Next.js 프레임워크의 동작원리를 알고있다면 Hydrate에 대해서는 이미 익숙하게 들었을 거다. 하지만, 놓치기도 쉬운 개념인 만큼, 이번에 제대로 공부하고 정리 해보려고 한다. 일단 React에서 렌더링 되는 과정과 Next에서 렌더링 되는 과정의 차이점에 대해서 정리 해 보자. React.js HTML과 JS파일을 한꺼번에 보내고 클라이언트에서 JS 코드를 통해 웹 화면을 렌더링한다. React는 JS파일만을 이용하여 웹 화면을 구성하는 원리를 가지고 있기 때문에 실제 HTML 코드는 안에 내용이 하나도 없는 상태이다. (CSR이 SEO에 적합하지 않은 원리) // public/index.html 단순 뼈대만 있는 HTML document와 Js 파일들을 클라이언트로 모두 보낸 뒤, 클라이언트 ..

Next.js를 사용하는 이유

Framework vs Library React는 라이브러리이고, Next는 React의 프레임워크이다. 이 둘의 궁극적인 차이점은 “응용 프로그램의 흐름 주도권을 누가 가지고 있느냐" 이다. 여기서 프레임워크란? 원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격 즉, 뼈대를 의미한다. 사용자는 코드를 작성하여 애플리케이션을 개발한다. 여기서 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분을 프레임워크가 관리한다. 라이브러리란? 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임. 즉, 특정 기능을 모아둔 코드 혹은 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미한다. Next.js SSR을 쉽게 구현하도록 도와주는 프레임워크 Next...

[React] useEffect와 sideEffect

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