Frontend/React12 Concurrent Mode(Concurrent Rendering)와 Suspense를 활용해 비동기 UI를 구성하는 방법과, 이 패턴의 장단점은 무엇인가요? Concurrent Mode(Concurrent Rendering)와 Suspense를 활용해 비동기 UI를 구성하는 방법과, 이 패턴의 장단점은 무엇인가요?** Concurrent Mode & Suspense* Concurrent Mode : 리액트 18이상에서 활성화 가능하고, 렌더링을 비동기로 수행하여 UI 차단 없이 업데이트를 처리한다.* Suspense : 비동기 컴포넌트 ( ex : lazy import, data fetch ) 로딩 시 fallback UI를 자동표시import {Suspense, lazy} from 'react';const Profiles = lazy(()=> import ('./Profile'));function App(){ return( Loading Profil.. 2025. 3. 21. React Fiber 아키텍처는 무엇이고, React reconciliation과정에서 어떤 역할을 하는지 설명하세요. React Fiber 아키텍처는 무엇이고, React reconciliation과정에서 어떤 역할을 하는지 설명하세요. 리액트 파이버는 리액트 16부터 도입된 새로운 재조정 reconciliation 엔진이다. 기존 Stack reconciliation방식의 동기적 업데이트를 대체하여, 작업을 작은 단위 fiber로 분할하고 우선 순위에 따라서 비동기적으로 처리할 수 있게 설계되었다. * 동작방식1. Fiber Tree : 각 컴포넌트는 Fiber 노드로 표현된다.2. Work Loop : 렌더링 작업을 여러개의 태스크로 분할한다. 브라우저 이벤트 ( 사용자 입력, 애니메이션 ) 사이에 작업을 일시중단 / 재개 한다.3. Priority Scheduling : 사용자 입력 ( 우선순위 높음 ), 애니메.. 2025. 3. 21. React 18 ) useTransition 아까 useActionState에 대해서 언급하였는데, 작동이 안되는 경우가 종종 있다. 예를 들어서, isPending 값이 제대로 업데이트 안되는 경우가 존재했다. ( 아무래도 아직 나온지 얼마 안되어서 그런건가? ) * 두가지 반환값이 존재한다. - isPending : 배열을 반환하는데, 첫번 째 값은 업데이트가 진행중인지 나타내는 boolean 값 - startTransition : 비우선 업데이트를 시작하는 함수 * 사용목적예를 들어서, 사용자가 입력하는 동안 목록 필터링처럼 시간이 좀 걸리는 작업이 있다면 이 작업을 startTransiton 안에 넣어서 실행할 수 있다. 그러면 입력반응은 즉시 이뤄지고, 시간이 걸리는 작업은 백그라운드에서 진행되면서 UI가 멈추지 않는다. import.. 2025. 3. 18. React 19 ) useActionState( 구 useFormState ) useFormState는 이전에 React Dom에서 제공했었고 이제는 useActionState로 이름이 바뀌어 제공된다. 목적은 폼의 동작을 쉽게 관리하기 위함이다. useActionState ( 구 useFormState )const [state, formAction, isPending] = useActionState(fn, initialState, permalink?); * 목적- 폼 제출 ( 이걸 액션이라고 한다 ) 을 호출할 때, 이전 상태와 함께 폼 데이터를 인자로 받아 처리한 후, 그 결과 상태를 관리해준다. * 기능- 폼 제출 시 자동으로 pending 상태를 관리한다.- 서버액션 ( 데이터 업데이트, 검증 등 )의 결과를 상태로 반영하여 이후 렌더링에 활용할 수 있다.- 이전 Cana.. 2025. 3. 18. 리액트 메이저 버전 업데이트 (2) - use use는 프라미스를 동기적으로 읽을 수 있게 해주는 리액트 api이다.이번 메이저 업데이트를 통해서 본 19 버전은 개발자의 개발 경험에 초점을 많이 맞춘 것 같다.클래스형 개발에서 함수형 개발로 업데이트 한 것은 렌더링이 잦은 리액트에서 필수적이었다면이번 메이저 업데이트는 필수적이지는 않지만, 기존에 개발을 하면서 번거로웠던 것들, 있으면 좋았던 것들이 많이 추가된 것 같다. 그 중에서 use 리액트 api의 경우에는, 개발자의 개발 경험에 대해서 가장 긍정적인 api가 아닐까 싶다. 들어가보자. 본 게시글은 하단의 포스트를 참조하였습니다. use는 다음과 같이 사용한다.import {use} from 'react'function MessageComponent({messagePromise}){ con.. 2024. 12. 12. 리액트 메이저 버전 업데이트 (1) - useTransition 22년도에 있었던 메이저 버전 변경 ( 18 )이후 정말 오랜만에 메이저 업데이트( 19 )가 이루어졌다.근데 아마 바로는 못쓸 것.... 다른 라이브러리 호환이 안될 수도.. 1. 더이상 메모이제이션을 쓸 필요가 없어졌다. useMemo, useCallback- 이제 리액트 컴파일러가 알아서 최적화한다. 2. 더 이상 forwardRef를 쓰지 않아도 된다.forwardRef로 감싸지 않아도 props로 ref를 전달받을 수 있다. 3. use() hook이 등장할 줄 알고 좋아했으나...이제 처음에 데이터 페칭해서 UI들 데이터로 채워넣는거 useEffect로 안해도 될 줄 알았는데.. 언제 나오려나 4. 여러가지 훅들이 나옴 useTransition[매개변수]매개변수는 없다.[반환]2개의 항목이 있.. 2024. 12. 11. Suspense와 ErrorBoundary ErrorBoundary- 컴포넌트의 에러처리를 위함- 하위 컴포넌트 트리에서 발생하는 JavaScript 에러를 포착하여 어플리케이션이 전체적으로 중단되지 않도록 하고, 대신 fallback UI를 표시한다. 이를 통해서 특정 컴포넌트에서 발생한 에러가 전체 UI에 영향을 주지 않도록 격리한다. Suspense- 비동기 로딩상태 관리를 위함- 비동기 작업이 완료될 때까지 대기하는 동안 fallback ui를 표시하는 컴포넌트이다. ErrorBoundary와 Suspense를 같이 사용할때 - Suspense는 비동기 작업의 로딩 상태를 관리하지만, 해당 작업 중에 에러가 발생하면 이를 처리할 수 없다. - 이 때 ErrorBoundary를 함께 사용하여 에러를 포착하고 적절한 폴백 UI 를 제공한.. 2024. 12. 3. useEffect와 setState의 배치 처리 사실 저번에도 올린 글이었는데, 다시 올린다. 리액트는 state가 바뀔 때마다 가상돔 비교를 통해서 화면을 다시 그린다. 그렇다면 setState 될 때마다 화면이 다시 그려진다는 것인가? 그렇다. 그렇다면 setState가 많이 호출될 때마다 비효율적으로 동작할 수 있다는 건가? 그렇다. 하지만 꼭 필요한 setState는 당연히 써야겠지만, 대부분 아닌 경우가 많다. 첫번째, 이벤트에 발생할 때 원하는 동작을 수행하게 하고 싶은 경우때문에 예를 들어서 스크롤을 할때마다 어떠한 동작을 하고 싶다고 하면 그냥 이벤트 리스너를 추가하는 것이 아니라, 꼭 '디바운싱' 처리를 해야한다. 디바운싱이란, N초 안에 1000번의 같은 이벤트가 발생하면, 해당 이벤트 리스너에 묶인 동작을 1000번 실행하는 .. 2024. 12. 3. useTransition * 여러 출처를 사용하였으며, 하단에 출처를 첨부합니다. Form 제출 -> API 요청 -> 응답 처리 -> UI 반영기존의 리액트에서는 대기상태 pending states, 오류 errors, 낙관적업데이트 optimistic updates, 연속요청 sequential requests 를 수동으로 처리하였다. 예를 들어서 이런 코드가 있다고 쳐보자. function UpdateName(){ const [name, setName] = useState(''); const [error, setError] = useState(null); const [isPending, setIsPending] = useState(false); const handleSubmit = async() .. 2024. 12. 3. 왜 리액트 배포하고 새로고침하면 404에러가 뜰까? 리액트는 SPA입니당. 우리는 이것저것 클릭하면 주소가 /something , /something/1 뭐 이런식으로 바뀌는걸 보지만 사실은 그냥 하나의 index.html파일에 js로 동적으로 브라우저가 휘리릭 바꿔주고 있을 뿐이에요. 사실 우리는 계속 같은 놈을 보고 있습니더..바로 루트에 있는 index.html 파일이요. 그리고 브라우저가 페이지에 들어가는 것은 해당 url에 index.html 파일을 내놔라! 하는 GET 요청을 보내는 것이에요. 그런데 말이죵 그럼 리액트로 빌드한 웹페이지에서 ~~~~~/testPage 에 들어가 있다고 쳐봅시당. 근데 새로고침했어요.그럼 우리는 어떤 url한테 index.html을 내놓으라고 GET 요청을 보내는 걸까요? 바로 ~~~~/testPage에요.근.. 2024. 10. 11. 이전 1 2 다음