# React18
React 18, Suspense 한눈에 알아보기
이전에는 React.lazy와 함께 사용 되었으나, 현재는 이외에도 선언적으로, 데이터 비동기 렌더링 처리를 도와준다.Suspense 로 감싸여진 컴포넌트가 비동기 데이터 처리를 하고 있음을 알 수 있다.비동기 데이터 처리를 하고 있는 컴포넌트의 코드가 짧아진다. \
CRA 명령어 없이 프로젝트 셋팅(React18, TypeScript, Webpack, Babel)
CRA없이 React18환경으로 프로젝트를 셋팅해보자. tsconfig와 webpack을 활용하여 절대 경로도 설정해줄 것이다.
React18의 automatic batching
나중에 다시 공부해보고 정리하기 ^^참고: https://merrily-code.tistory.com/226
React18 : Type{} is not assignable to type 'ReactNode' 해결
오랜만에 배포를 진행하려는데 너무나 당연하게 사용하던 라이브러리(react-youtube)에서 갑자기 type문제가 발생하였다. (왜그러는데;) 조금 찾아보니 react18업데이트(22.03.08) 이후 type 적용이 일부 불안정한 부분이 있었던 것으로 확인되어, 해
[React 18] ReactDOM.render
평소처럼 CRA로 React 프로젝트를 만들고 npm run start 했더니 이러한 에러 메시지가 콘솔창에 보였다.Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead.
간단한 쇼핑몰 예제
clayful를 이용한 토이 프로젝트를 수행했다. 상품을 장바구니에 담고, 장바구니에서 주문을 하면 결제 페이지로 넘어간다. 배송지 정보를 입력하고 주문을 클릭하면 결제 요청을 하게 된다.
Hydrate(Next, React 18)
CSR과 SS에 대해 알아보고 Hydrate에 대한 개념을 살펴보자. 그리고 React 18에서 추가된 Suspense의 강력한 기능과 Hydrate를 알아보자.
React 18 클라이언트 렌더링 API 업데이트 관련 TS 이슈 (closed)
TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | Docume
(Carrot-Market)
nextJs+prisma+tailwindCss+PlateScale을 이용해서당근마켓 클론코딩입니다. 기본 세팅하기. 1\. npx create-next-app@latest --typescript 2\. npm i next@lateat react@rc re
당근 마켓 클론 + NextJS + Tailwind + React18 + Prisma + PlanetScale + Cloudflare
Next Js 풀스택 당근마켓 클론
React18 과 SSR, batch update
리엑트에서 SSR을 한다고 생각하면 이런 방향으로 진행될 것이다 (next.js를 다시 떠올리며)서버사이드에서 필요한 데이터를 fetching한다 서버사이드에서 처리한 html을 response로 전달한다.클라이언트 사이드에서 브라우저는 html의 스크립트 태그를 파싱
React18: Suspense의 활용 그리고 리액트의 SSR 진화
프론트엔드 생태계를 점령할지도 모르는 리액트18https://www.youtube.com/watch?v=7mkQi0TlJQo진화해 버린 Suspense의 활용에 대하여 정리하자면...그동안 많은 반복 작업을 만들어낸 로딩체크 로직..이 작업들을 간결화하기 위해
[번역] Introducing React 18
원본 링크는 아래와 같습니다.https://github.com/reactwg/react-18/discussions/4이 글은 React 18에 대한 계획의 개요를 제공하고, 논의의 다른 주제에 대한 점프 포인트 역할을 하기 위한 것이다높은 수준에서, React