🌳Frontend/react

리액트에서 에러를 처리하기 위한 방법은 여러가지가 있습니다.fetch 라이브러리인 axios 의 interceptor 에서도 처리할 수 있구요, 리액트에서의 error boundary 로도 처리할 수 있죠.그리고 createBroswerRouter의 errorElement 속성으로도 처리가 가능합니다.이 여러가지 방식들의 차이점에 대해 알아봅시다.1. Axios Interceptor에서 에러 처리주로 네트워크 관련 에러나 인증 실패와 같은 HTTP 요청 실패를 처리할 때 사용됩니다.적합한 상황인증: 만료된 토큰으로 인해 401 에러가 발생했을 때 토큰을 갱신하고 다시 요청을 시도하거나, 로그인 페이지로 리디렉션하는 등 사용자 인증 관련 처리가 필요한 경우공통 API 에러 처리: 네트워크 오류, 서버 오류..

리액트에서 에러바운더리를 쓰는 이유에 대해서 알아봅시다.그 이유에 대해 알아보기 전에, 에러 바운더리를 간단히 설명하자면 아래와 같아요. 📒 선언적으로 에러를 처리할 수 있게 해주는 리액트 컴포넌트 기존에 명령형으로 처리했던 로직을 선언적으로 처리할 수 있도록 도와주는데요.더 자세히 알아봅시다.왜 사용해요?사실, 에러 바운더리를 사용하지 않아도 기본적인 에러처리는 가능해요.const MyComponent = () => { const { data, error, } = useQuery(...); if (error) { return 오류가 발생했어요! } return ( {data.data.map(...)} );}위와 같은 코드는 명령형 코드로 분류돼요.명령..

해당 게시글은 우아한 타입스크립트 with 리액트 10장을 읽고 정리한 글 입니다. React에서 State 란? - 시간이 지나면서 변할 수 있는 동적인 데이터 - 렌더링에 영향을 줄 수 있는 동적인 데이터 리액트 앱 내에서의 상태는 지역 상태, 전역 상태, 서버 상태 로 분류할 수 있습니다. 리액트 API만 으로도 상태를 관리할 수 있지만, 성능 문제가 발생하거나 규모가 커져 복잡해지면 Redux, MobX, Recoil 과 같은 외부 상태 라이브러리를 주로 활용합니다. 특히나, 컴포넌트 간의 상하관계 사이에서 상태 전달을 위해 과도한 Props drilling 을 막고자 사용합니다. React 에서 State 를 정의할 때 고려해야 할 사항 리액트에서 state가 변하게 되면(업데이트가 되면) 리렌..

컴포넌트의 props에 컴포넌트를 넘겨야 할 때, props의 이름과 컴포넌트의 타입을 선언해주어야 한다. import { JSX, ReactElement, ReactNode, useEffect, useState } from 'react' interface Props { component: ReactElement component1: JSX.Element component2: ReactNode } 하지만 이 컴포넌트의 타입은 `ReactElement` , `Element` , `ReactNode` 세가지가 있으며, 세가지 모두 리액트의 요소를 나타낸다. 이 타입들의 차이는 무엇이 있을 지 알아보자. ReactElement 리액트에서는 JSX 문법으로 UI를 표현하고, 트랜스파일러는 JSX문법을 crea..