React5 리액트 상태 관리 전략 - Context API 와 상태관리 라이브러리 리액트 애플리케이션을 개발하면서 가장 중요한 부분 중 하나는 상태 관리 전략을 선택하는 것이다. 이 중에는 리액트가 제공하는 Context API 부터, Redux, Recoil, MobX 등 다양한 라이브러리가 이러한 필요를 충족시키기 위해 존재한다. 각각의 도구는 고유의 장단점이 있고 사용하는 방법이 있기에, 프로젝트의 요구 사항에 따라 올바른 도구를 선택하는 것이 중요하다. 리액트의 Context API 와 Redux로 대표되는 상태 관리 도구를 비교하여, 어떤 상황에서 어떤 도구를 사용하는 것이 가장 효과적인지 알아보자. Context API 기본 개념리액트 Context API 는 컴포넌트 트리 전체에 걸쳐 데이터를 전역적으로 공유할 수 있는 메커니즘을 제공한다. 이를 통해 특정 데이터를 여러 .. 2024. 8. 9. React - useQuery 를 사용할 때 에러가 발생한다면..? 리액트 쿼리(React-Query)는 리액트 애플리케이션에서 서버 상태를 효과적으로 관리하고 캐싱할 수 있도록 도와주는 라이브러리이다. 서버에서 데이터를 가져오고, 캐시하고, 동기화하는 작업을 단순화하며, 데이터를 더 쉽게 관리할 수 있게 해준다. useQuery 를 사용해서 서버와 통신을 하다가 에러가 발생하면 어떤 현상이 생길까? 그리고 이 에러를 어떻게 처리할 수 있을지 알아보자. 아래는 기본적인 useQuery 사용예시이다. `getUserInfo` 함수를 이용해 유저 정보를 요청하고, useQuery를 이용해서 받아온 데이터를 필요한 곳에서 사용할 수 있다. const getUserInfo = async (id: string) => await api.get('/user').json(); /.. 2024. 7. 11. Suspense in React | 리액트 서스펜스 리액스 Suspense 란?비동기 작업을 보다 효과적으로 관리하여 사용자 경험을 개선하는 기능을 가지고 있다. 서스펜스를 이용하면 컴포넌트에서 필요한 데이터가 준비될 때까지 렌더링을 지연(suspense)시킬 수 있다. 리액트 16.6 버전에서 처음 도입되었다. 주로 아래 두 기능을 위해 사용되지만 이미지, 스크립트 또는 다른 비동기 작업을 위해서도 사용될 수 있다.1. 코드 분할(Code split)2. 서버 API 호출과 같은 데이터 가져오기(Data fetching) 코드 분할 시 Suspense 사용 예import React, {suspense, lazy} from 'react';const LazyComponent = lazy(() => import ('./lazy/component');fun.. 2024. 6. 22. ErrorBoundary in React || 리액트 에러 바운더리 기본적인 리액트 웹앱에서 렌더링시 에러가 발생한 경우, 리액트는 에러가 발생한 UI를 스크린에서 제거한다. JS에서 에러는 호출자(caller) 방향으로 전파된다. 즉 콜 스택의 아래 방향(실행 중인 실행 컨텍스트가 푸시되기 직전에 푸시된 실행 컨텍스트 방향)으로 전파되기 때문에, 리액트에서도 마찬가지로 하위 컴포넌트에서 에러가 발생하면 에러가 상위 컴포넌트까지 전달되고, 에러 바운더리가 없는 경우에는 사실상 앱 전체가 스크린에서 제거되면서 흰 화면이 나타나게 된다. 이 때 에러 바운더리를 사용하면 상위에 전파되는 에러를 적절하게 끊을 수 있고 앱 전체가 보이지 않게 되는 불상사를 막을 수 있다. ErrorBoundary 란?React에서 'ErrorBoundary' 는 컴포넌트 하위 트리 내에서 발.. 2024. 6. 17. Why React? | 리액트 왜 사용하세요? 요즘의 프론트엔드 개발자라면 누구나 알고 있어야 하는 리액트. 딱히 프론트엔드 개발자가 아니더라도 웹개발에 관심이 있는 개발자라면 누구나 리액트가 인기있고 대세라는 것은 모두 알고 있는 사실이다. 개발자에게 의미있는 NPM 다운로드 수 기준으로만 본다면, 모던 웹 라이브러리/프레임워크(Modern Web Library/Framework) 즉, Angular, React, Vue 이 3대장 사이에서도 압도적인 다운로드 숫자를 가지며, 프로덕션 환경에서 가장 많이 쓰인다는 jQuery도 따라올 수 없는 수준이다. 그리고 이 격차는 점점 더 벌어지고 있다. React의 출시는 2013년이지만 본격적으로 인기가 많아진 시기는 React Hooks가 출시된 2019년 즈음부터인것 같다. 그 이전에는 클래스형 컴포.. 2024. 5. 14. 이전 1 다음
