# React18

20개의 포스트
post-thumbnail

React Hooks - useTransition()

useTransition의 등장배경 렌더링 과정에서의 Blocking rendering 문제를 해결하기 위해 React18 버전에서 새로운 훅이 등장했다. Blocking rendering이란 한번 렌더링연산이 시작되면 멈출 수 없는 문제이며 처리할 것이 많은 화면을

2022년 7월 20일
·
0개의 댓글
·

NextJs에 React18 Suspense 적용하기 (with react-query 적용)

🚪 들어가기 React Suspense는 React 16에서 릴리즈된 기능이다. React 18에서는 추가된 기능을 제공하고 있고 Error Boundary와 합친 기능으로도 사용할 수 있다고 하여 적용해보려한다. 이 글에서는 React 16에서의 Suspense와

2022년 7월 13일
·
0개의 댓글
·

React Suspense

프론트엔드 어플리케이션에서 데이터 로딩을 관리하는 것은 점점 어려워지고 있다. 이러한 이유 때문에, 프론트엔드 생태계의 다양한 상태관리 라이브러리들이 등장했따.React팀은 이러한 문제를 인지하고 있었고, Suspense는 React 컴포넌트의 Loading state

2022년 7월 8일
·
0개의 댓글
·
post-thumbnail

쉽게 떠먹여주는 React 18 업데이트

이 포스트는 React18 이후 React가 어떻게 달라졌는지, 이 변화가 어떤 걸 의미하는지 정리하는 글입니다.

2022년 6월 29일
·
0개의 댓글
·
post-thumbnail

React 18, Suspense 한눈에 알아보기

이전에는 React.lazy와 함께 사용 되었으나, 현재는 이외에도 선언적으로, 데이터 비동기 렌더링 처리를 도와준다.Suspense 로 감싸여진 컴포넌트가 비동기 데이터 처리를 하고 있음을 알 수 있다.비동기 데이터 처리를 하고 있는 컴포넌트의 코드가 짧아진다. \

2022년 5월 29일
·
0개의 댓글
·
post-thumbnail

CRA 명령어 없이 프로젝트 셋팅(React18, TypeScript, Webpack, Babel)

CRA없이 React18환경으로 프로젝트를 셋팅해보자. tsconfig와 webpack을 활용하여 절대 경로도 설정해줄 것이다.

2022년 4월 29일
·
0개의 댓글
·

React18의 automatic batching

나중에 다시 공부해보고 정리하기 ^^참고: https://merrily-code.tistory.com/226

2022년 4월 27일
·
0개의 댓글
·
post-thumbnail

React18 : Type{} is not assignable to type 'ReactNode' 해결

오랜만에 배포를 진행하려는데 너무나 당연하게 사용하던 라이브러리(react-youtube)에서 갑자기 type문제가 발생하였다. (왜그러는데;) 조금 찾아보니 react18업데이트(22.03.08) 이후 type 적용이 일부 불안정한 부분이 있었던 것으로 확인되어, 해

2022년 4월 23일
·
6개의 댓글
·
post-thumbnail

[React 18] ReactDOM.render

평소처럼 CRA로 React 프로젝트를 만들고 npm run start 했더니 이러한 에러 메시지가 콘솔창에 보였다.Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead.

2022년 4월 15일
·
0개의 댓글
·
post-thumbnail

간단한 쇼핑몰 예제

clayful를 이용한 토이 프로젝트를 수행했다. 상품을 장바구니에 담고, 장바구니에서 주문을 하면 결제 페이지로 넘어간다. 배송지 정보를 입력하고 주문을 클릭하면 결제 요청을 하게 된다.

2022년 4월 14일
·
0개의 댓글
·
post-thumbnail

Hydrate(Next, React 18)

CSR과 SS에 대해 알아보고 Hydrate에 대한 개념을 살펴보자. 그리고 React 18에서 추가된 Suspense의 강력한 기능과 Hydrate를 알아보자.

2022년 4월 4일
·
2개의 댓글
·
post-thumbnail

React 18 클라이언트 렌더링 API 업데이트 관련 TS 이슈 (closed)

TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | Docume

2022년 4월 2일
·
0개의 댓글
·
post-thumbnail

(Carrot-Market)

nextJs+prisma+tailwindCss+PlateScale을 이용해서당근마켓 클론코딩입니다. 기본 세팅하기. 1\. npx create-next-app@latest --typescript 2\. npm i next@lateat react@rc re

2022년 3월 30일
·
0개의 댓글
·

React18 과 SSR, batch update

리엑트에서 SSR을 한다고 생각하면 이런 방향으로 진행될 것이다 (next.js를 다시 떠올리며)서버사이드에서 필요한 데이터를 fetching한다 서버사이드에서 처리한 html을 response로 전달한다.클라이언트 사이드에서 브라우저는 html의 스크립트 태그를 파싱

2022년 2월 10일
·
0개의 댓글
·
post-thumbnail

React 18 (RC in now)

와 벨로그 오랜만,,

2022년 2월 9일
·
0개의 댓글
·

리액트 18 새로운 기능

노마드 코더의 완전 새로운 리액트가 온다? 핵심정리 10분컷 을 보고 요약한 내용입니다.

2022년 1월 23일
·
0개의 댓글
·

React18: Suspense의 활용 그리고 리액트의 SSR 진화

프론트엔드 생태계를 점령할지도 모르는 리액트18https://www.youtube.com/watch?v=7mkQi0TlJQo진화해 버린 Suspense의 활용에 대하여 정리하자면...그동안 많은 반복 작업을 만들어낸 로딩체크 로직..이 작업들을 간결화하기 위해

2022년 1월 13일
·
0개의 댓글
·
post-thumbnail

React 18 변경점

리엑트 18버전에 추가되는 기능은 기존 버전의 어떤 문제점들을 해결 해줄까?

2021년 6월 19일
·
10개의 댓글
·

[번역] Introducing React 18

원본 링크는 아래와 같습니다.https://github.com/reactwg/react-18/discussions/4이 글은 React 18에 대한 계획의 개요를 제공하고, 논의의 다른 주제에 대한 점프 포인트 역할을 하기 위한 것이다높은 수준에서, React

2021년 6월 12일
·
0개의 댓글
·