# React18

minsu8834

1. 지난 편에 이어서... 지난 편에서는 rsc에가 무엇이며, 썼을 때의 이점 등을 살펴봤다. 그래서 이번 편에서는 어떻게 적용이 실제되고 있는 지 살펴볼 예정이다. 이번 예제는 참고로 필자가 기존에 작업해 둔 next.js로 작성해 둔 연습용 blog 코드를 토대로 설명한다. 코드를 살펴보기에 앞서, next.js가 13버전과 RSC의 연관성부터 살펴보자. 2. next 13은 뭐가 달라졌나? next 13 버전에 들어오면서 가장 큰 변화는 단언코 App-Router다. 1) 어딘지 모를 찝찝함. next를 기존에 써 본 사용자라면, 어느 정도 공감할 수 있는 부분이다. 이게 막상 써보면, react와 사실 뭐가 다른 지 명확하게 느끼기 어렵다. 물론, 그도 그럴

9bin08

React 18+ Concurrency Mode 도입 ! 1. Concurrency mode JavaScript는 기본적으로 싱글 스레드 언어입니다. 이것은 주로 브라우저의 메인 스레드에서 실행되며, 이 스레드는 CSS 애니메이션, 사용자 입력 처리, 그리고 JavaScript의 실행 등 다양한 작업을 담당합니다. 따라서 메인 스레드에서 긴 JavaScript 작업이 실행되면, 웹페이지의 반응성이 떨어질 수 있습니다. Javscript의 한계를 극복하고자 React18+ 에서 Concurrency mode 지원을 시작하였습니다. Concurrency란 말 그대로 동시성인데, 싱글 스레드 환경에서 동시에 작업을 한다는 말은 기술적으로 불가능한 말입니다. 작업을 동시에 한다면 무엇이 좋을까요? Concurrency mode의 목표는 오직 사용자 경험의 개선이라고 말하고 있습니다. 브라우저의 UI 스레드는 CSS, 사용자의 입력, Javascript로 인한 화면

gygy

React 18에서는 여러 업데이트가 이루어졌습니다. Concurrency 개념도 포함이 되었고... 서버측 렌더링 기능에 대한 내용도 있고요. 이러한 리액트 18 업데이트와 연관된 Next.js 13의 변경사항들도 눈에 띄는데, 리액트 18과 Next.js 13은 어떤 연관성이 있는지, 어떤 방향성을 가지고 무엇이 바뀌었는지 이해해보고 싶었습니다. Next.js, 뭐가 그렇게 좋은데? 그거 SSR 원툴 프레임워크 아냐? 예전엔 그런 느낌이 있었던 것 같기도… 처음 Next.js를 공부해서 사용할 때만 해도, 몇년 전까지만 해도 Next.js는 주로 리액트만으로 만든 애플리케이션의 한계인 SEO 최적화와 초기 페이지 로드속도 향상을 위한 SSR을 위해 사용하는 것이 가

pengoose_dev

해당 글에선 named export한 컴포넌트를 codeSplitting하기 위해, default export로 바꾸는 과정에서 휴먼에러를 방지하는 lazyExport 유틸함수에 대해 다룬다. 문제가 발생하지 않는 상황 필자는 ReactJS의 Routes 컴포넌트 내부에 들어가는 Route를 JSX 컴포넌트 타입으로 관리한다. 타입은 다음과 같다. 이제 Router 컴포넌트에 적용하기 위해 Router.tsx를 생성해보자. ROUTE 상수의 AUTH 로직은 이 글에서 다룬다. CodeSplitting 적용(문제 발생) 큰 문제가 없어보이는 현재

leejpsd

Suspense 의 구조 https://velog.io/@leejpsd/React-Custom-Suspense Introduction React Working Group(reactwg)에서 React Core Team의 Dan Abramov는 React 18의 주요 Feature 중 하나인 Suspense가 SSR Architecture의 구조적인 성능 개선을 위해 어떤 역할을 하게 될지에 대한 내용을 설명했습니다. [discussion link] 이번 포스팅은 해당 Discussion을 번역해서 현재 SSR이 어떻게 이루어지고 있는지, React 18의 Suspense가 이를 어떻게 구조적으로 개선했는지에 대해 살펴보려고 합니다. (원문 링크는 discussion link나 아래 Reference를 참고해주세요) 이 글은 새로운 서버사이드 렌더링 아키텍처와 디자인, 그리고 문제 해결 방법에 대한 High-Level Overview입니다. 자세한 구현 사항은 이후

leejpsd

디바운스(Debounce)와 스로틀(Throttle) 을 대체할 수 있는 react hook인 useDeferredValue와 useTransition를 알아보겠습니다. React 18의 Concurrent Rendering: useDeferredValue와 useTransition 최신 React 버전인 React 18은 놀라운 성능 개선과 유연성을 제공하는 concurrent rendering 기능을 도입했습니다. 이를 통해 UI 업데이트와 상호작용을 더욱 부드럽게 처리할 수 있게 되었습니다. 이번 글에서는 React 18에서 도입된 중요한 변화 중 하나인 useDeferredValue와 useTransition 훅에 대해 알아보겠습니다. Concurrent Rendering이란? Concurrent Rendering은 React 18에서 새롭게 도입된 기능으로, 병렬 처리와 우선순위 조절을 통해 더 나은 사용자 경험을 제공합니다. 이전 버전에서는

gunho1998

아래 작성한 예시코드와 같은 구조로 요청 시 마다 고양이에 대한 사실을 데이터로 보내주는 API 와 통신을 하였습니다. 그리고 얻은 데이터를 화면에 뿌려주는 간단한 작업을 진행하였습니다. 이후 제가 기대한 것은 revalidate로 설정한 5초가 지난 후 데이터를 요청했을 때 새로운 텍스트로 바뀐 채 화면에 뿌려지는 것이였습니다. 하지만 5초가 지난 뒤 다시 요청하였음에도 이전 데이터가 그대로 화면에 보여지게 되었습니다. Revalidate 예시 코드 > 아래 코드는 Server Component에서 작성된 코드입니다. revalidate 옵션을 사용한 첫 번째 fetch 요청이 호출되면, 데이터는 외부 데이터 소스에서 가져와서 데이터 캐시에 저장됩니다. 지정된 시간 내에 호출된 모든 요청(예: 5초)은 캐시된 데이터를 반환합니다. 시간이 경과한 후, 다음 요청은 여전히 캐시된 데이터를 반환합니다. 시간이 경과하고 첫 요청이

qmflf556

📚 서론 풀스택을 지향하고 있다고 하나 FE 분야의 경우 기술개발의 속도가 어마어마하다. 따라서 최신 트렌드에 어떤 기술들이 발전하고 있는지에 관심을 가질 필요성을 느꼈는데 그중에서도 스터디를 진행중인 React 에서 마지막으로 React 18 버전이 나왔고 이때 동시성에 대해 중요하게 여긴 변경점이 있었다. 예를 들어 non-concurrent 환경에서는 한 번에 한가지 일을 할 수 있었으나 concurrent 환경에서는 한 번에 여러가지 일을 할 수 있어서 React 도 오래 걸리는 렌더링중에도 즉각적인 인터렉션을 제공할 수 있게 되었다는 의미이다. 아무튼 React Docs, Vercel, freeCodeCamp 의 문서를 기반으로 이번 React 18 에서 추가되고 향상된 기능들과 이와 관련된 React 2021 Conf 의 좋은 강연들을 참고하여 이번 포스트를 작성하였다. > 이번 포스트는 처음 접하는 개념에 docs 와 conf 의 원서

sehyunny

트랜지션, 서스펜스, 리액트 서버 컴포넌트와 같은 동시성 기능이 어떻게 애플리케이션 성능을 개선했는지 알아보겠습니다. > 원문 : https://vercel.com/blog/how-react-18-improves-application-performance 리액트 18은 동시성 기능을 도입하여 리액트 애플리케이션의 렌더링 방식에 근본적인 변화를 가져왔습니다. 우리는 이러한 최신 기능들이 애플리케이션 성능에 어떠한 영향을 미치고 개선하는지 알아볼 것입니다. 우선, 잠시 뒤로 물러나서 long task에 대한 기본 지식과, 이에 따른 성능 측정에 대해 이해해보겠습니다. 메인 스레드와 long task 브라우저에서 자바스크립트를 실행할 때, 자바스크립트 엔진은 주로 메인 스레드라고 불리는 싱글 스레드 환경에서 코드를 실행합니다. 메인

minsu8834

01. Intro. 이번 글은 필자가 최근에 심도있게 공부하고 팔로우 업하고 있는 하나의 현상에 대해 조금 끄적여 볼까한다. 우리는 보통, 각 분야 혹은 포지션에서 누군가 그 길이 되어주는 사람들이 닦아 온 길을 살펴보고 따라간다. 이게 무슨 개발자 블로그에 엉뚱한 소리냐? 라고 반문하실 수 도 있다. 하지만, 그 원리는 프로그래밍의 세계에서도 역설적이게도 통요되는 이야기다. 필자가 하려는 이야기는 어쩌면 하나의 프레임워크 얘기일 수도 있겠지만, 이미 수 년 동안 프론트엔드 챕터의 가장 큰 영향력을 행사하고 있는 리액트에 대한 이야기다. 02. react에 대하여. 아래 그림은 위키 피디아에서 리액트에 대해 서술해 놓은 부분이다. 리액트는 이미 출시된 지 10년이 넘은 장수 라

ckstn0777

Overview RSC(React Server Component) 는 도대체 뭘까? 2편으로 돌아왔습니다. 저번 시간에는 JSX를 HTML로 변환하고, 컴포넌트로 분리하고, 비동기 컴포넌트까지 만들어봤습니다. 원본 글 : https://github.com/reactwg/server-components/discussions/5 이번 시간에는 남은 글에 대해 번역 및 실습을 진행해보도록 하겠습니다. 근데 1편보다 2편이 꽤 어렵더군요. 그래도 열심히 해보도록 하겠습니다. Step 5: Let's preserve state on navigation 지금까지 서버는 HTML 문자열에 대한 경로만 렌더링할 수 있습니다: 브라우저는 HTML을 최대한 빨리 표시하도록 최적화되어 있기 때문에 이것은 초기 로드에 대해서는 휼룽합니다. 그러나 navigation 에 대해서는 이상적이지 않습니다. 변경된 부분에 대해서만 업데이트하여 내부와 주변(예: input,

ckstn0777

Overview 7월 첫 포스팅에 대한 주제로 RSC(React Server Component)를 정했습니다. 사실 계속해서 RSC에 대해 공부하고 있었습니다. 도대체 이 녀석을 뭘까? 지금도 솔직히 잘 모르겠습니다. 그래도 위안이 되는건 저뿐만이 아니라는 것입니다. 해외 여러 댓글을 살펴보면 혼란스럽다 라는 반응이 많습니다. 그만큼 RSC는 아직까지 사람들에게 익숙하지 않은 거 같습니다. 그래도 이렇게 글을 쓰는 이유는 "RSC From Scratch. Part 1: Server Components" 라는 좋은 글을 찾아서 번역 및 실습 내용을 공유해보면 좋을 거 같아서 입니다. 참고 : https://github.com/reactwg/server-components/discussions/5 어쩌다보니 Dan Abramov 이 분에 대해 알게 되었는데 React 개발자더군요. React 업계 쪽에서는

ckstn0777

해당 글은 Jack Herrington의 React Streaming In Depth: NextJS! Remix! DIY! 를 실습한 결과를 바탕으로 작성되었습니다. Overview 이번 시간에는 다소 늦었지만 React 18 Streaming 에 대해 글을 작성해보려고 합니다. 여기에는 SSR, Suspense, Hydration 과 같은 중요한 개념이 포함되어있습니다. 그만큼 핵심적인 내용이지만 다소 어려운 측면도 있습니다. 아직 저도 제대로 이해한건지 확신이 들진 않지만 그래도 아는만큼 작성해보겠습니다. 틀리거나 부족한 내용이 있을 수 있으니 참고 부탁드립니다. 🙏 Our Example Project - Next.js 간단하게 Next.js 예시 프로젝트를 하나 만들어보겠습니다. ![](https://velog.velcdn.com/images/ckstn0777/post

ckstn0777

Overview React에서 Suspense가 트렌드가 된 건 아무래도 React 18버전부터 아닐까 생각됩니다. 16버전부터 존재하긴 했지만 제한적으로 사용되었고 확장된 기능이 지원되기 시작한건 18 버전부터입니다. Suspense는 현재 안쓰이는 곳이 없다고 봐도 될 정도로 많은 곳에서 사용되고 있는 거 같습니다. React-Query, SWR 뿐만 아니라 Next.js 에서도 사용되니까요. 이번 시간에는 Suspense가 무엇이고 왜 이렇게 많은 곳에서 사용되는지 알아보도록 하겠습니다. 그러기 위해서는 먼저 Race Condition에 대해 살펴보겠습니다. 첫번째 문제. Race Condition Race Condition 란 > 공유 자원에 대해 여러 개의 프로세스가 동시에 접근을 시도할 때 접근의 타이밍이나 순서 등이 결과값에 영향을 줄 수 있는 상태를 말한다. 동시에 접근할 때 자료의 일관성을 해치는 결과가 나타날 수 있다. -

yonadev

create-react-app 에서 리액트 18버전으로 업그레이드를 하려고 하니 아래와 같은 에러에 맞닦뜨렸다. react-dnd 깃헙 상에도 오픈 이슈로 진행중인 상태이지만 아직 패치된 버전은 릴리즈 되지 않은 상태다. https://github.com/react-dnd/react-dnd/issues/3416 webpack config를 수정하라는 답변이 있는데, create-react-app을 사용중이기 때문에 eject를 하지 않는 한 해당 방법을 사용할 수 없다. 한 가지 방법으로 patch-package 라이브러리를 사용하여 문제가 되는 라이브러리를 직접 수정할 수 있다. patch-package patch-pack

nninnnin7

개요 useDifferedValue, useTransition 이들의 공통점과 차이점 (+debounce) useDifferedValue, useTransition의 공통점은 비싼 렌더링 연산에 대한 문제를 해결할 때 사용한다. 차이점이 궁금하다면 본문을 읽어보자. Suspense Suspense는 비싼 렌더링 연산의 fallback rendering을 효과적으로 처리할 수 있도록 돕는 도구다. 자세한 내용은 본문에.. 본문 기본적으로 리액트(Concurrent 하지 않은)는 간단한 렌더링 연산과 비싼 렌더링 연산, 예를 들어 인풋값이 변경되는 연산과 해당 인풋으로 인해 복잡한 리스트가 렌더링되는 연산, 이 함께 일어날 때 해당 작업들의 중요도를 동일하게 여긴다. 문제는 비교적 간단한 연산에 해당하는 유저가 입력한 인풋값을 업데이트 하는 렌더링이 복잡한 리스트 렌더링에 우선순위가 밀리게 될 때 일어난다. 우선순위에서 밀려나있는 작업이

nninnnin7

리액트 공식 홈페이지의 'blog' 탭을 보면 리액트 18 업데이트와 관련된 글 이 있다. 2022년 3월에 업데이트 된 글인데, 나는 무려 1년 뒤 읽고야 말았군..^^; 이 글에서는 리액트 18에 추가된 Suspense, transition 등의 기능은 다 Concurrency(동시성)라는 개념을 리액트의 렌더링에 적용시키는 일이라고 말한다. 그것이 Concurrent rendering이다. 왜 렌더링에 동시성 개념을 적용시키기로 리액트 팀은 마음먹었을까? > This means the UI can respond immediately to user input even if it’s in the middle of a large rendering task, creating a fluid user experience. 모두 더 나은 사용자 경험을 위함이란다. 그간, 리액트에서 렌더링이란 한번에

wns450

startTransition React 18에서 새로 나온 기술인 startTransition 이란 메소드가 추가 되었다. 이 메소드를 요약하면 event의 우선순위를 정해준다. 예로 들면, input 창에 입력을 하면 차례대로 이벤트가 발생하는데, onChange 특성상 연속해서 발생하기 때문에, 이벤트가 연달아 일어나면서 블로킹이 일어날 가능성이 높아진다. (자동완성은 데이터 패칭 -> 데이터 받아옴 -> 드롭다운 업데이트가 연달아 일어나서 무겁다) 그래서 이러한 상황을 막고자 디바운스를 걸어서 해결하고자 한다. > Debounce는 입력값이 변경될 때마다 연속적인 이벤트를 처리하지 않고, 일정 시간동안 대기하다가 마지막 이벤트 발생 후 한번만 처리하는 기법입니다. 이를 통해 입력 값 변경에 대한 불필요한 이벤트 발생을 방지하고, 성능을 개선할 수 있습니다. startTransition을 사용하여서 sea

nninnnin7

서버 컴포넌트는 서버사이드 렌더링과 어떻게 다른 것인가? 서버 컴포넌트는 컴포넌트를 서버에서 그려줄 뿐 아니라, 클라이언트에 전송되는 자바스크립트 코드를 줄여준다. 반면 SSR에 사용되는 컴포넌트 코드는 클라이언트에도 전송된다. 요청 시 이것을 전달하여 서버에서 그려받아온 다음 hydrate시키는 것이므로.. Next.js의 /app 디렉터리 안에 있는 것은 기본적으로 모두 서버 컴포넌트이다. 서버 컴포넌트는, 서버사이드 렌더링되는 클라이언트 컴포넌트와는 다르게, '서버 자산'에 접근이 가능하다! 예를 들어 서버에 존재하는 상품 카테고리와 관련된 enum이 존재하고, 이와 동일한 데이터를 사용하여 클라이언트에서 렌더링이 필요한 경우 enum을 복사해와서 클라이언트 프로젝트에 넣어둔 후 (또는 SSR과 관련된 콜백에서 fetch 후) 해당 데이터로 렌더링을 하는 코드를 작성했다면, 서버 컴포넌트를 사용한다면 해당 컴포넌트 안에서 서버의 asset을 바로 imp

hustle-dev

문제 아래와 같은 react 18 버전 코드가 있다. 코드 샌드박스 링크: https://codesandbox.io/s/sad-firefly-sphup6?file=/src/App.tsx > 이 코드에 대해서 간략하게 설명하면, target이 falsy 값일 경우에는 Dropdown 컴포넌트의 listener가 실행되고 있지 않다가 target이 falsy 값이 아니게 되면, 이벤트 리스너가 부착되는 코드이다. 이 코드의 동작방식을 예측하면, 당연히 처음 버튼을 눌렀을 때, target의 값이 초기화되면서, document에 listener가 부착되고, 그 이후에 버튼을 다시 눌렀을 때 listener가 실행되는 것을 예상했다. 그러나 실제 동작방식은 아래의 화면과 같았다. ![](https://velog.velcdn.com/images/hustle-dev/post/e26326ce-97c4-469f-8212-b7459e60f081/