코딩하는 곰돌이

[Frontend] Redux 비동기 관리 정리

Redux 비동기 관리 정리(thunk부터 RTK Query까지)Redux의 reducer는 순수 함수여야 합니다. 그런데 API 호출, 타이머, 웹소켓처럼 세상의 대부분은 비동기입니다. 이 근본적인 긴장을 Redux 생태계가 어떻게 풀어왔는지, 그리고 지금 가장 권장되는 방식은 무엇인지 정리합니다.1. 왜 Redux에서 비동기가 특별한 문제인가Redux의 핵심 원칙은 reducer가 순수 함수여야 한다는 것입니다.(state, action) => newState같은 입력에는 항상 같은 출력이 나와야 하고, 부수 효과(side effect)가 없어야 합니다. 하지만 fetch로 서버에 요청을 보내는 행위 자체가 이미 부수 효과입니다. 그래서 Redux는 "비동기 로직은 reducer 바깥, 미들웨어라는 ..

[Frontend] useTransition과 Error Boundary가 만나면?

React 19: useTransition과 Error Boundary가 만나면 생기는 일지난 글들에서 Error Boundary의 기본 개념과 react-error-boundary의 내부 구현을 다뤘습니다. 이번에는 React 19에서 등장한 Actions와 useTransition이 Error Boundary와 결합하면서 만들어진 새로운 에러 핸들링 패턴을 살펴봅니다.1. 기존 방식의 한계: 흩어진 로딩·에러 상태React 18까지, 비동기 작업을 다루는 코드는 대개 이런 모양이었습니다.function ProfileForm() { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); ..

안녕하세요🖐🏻 코딩 알려주는 형입니다.오늘은 리액트(React)의 특징과 장·단점에 대해 알아보겠습니다.👀리액트(React)란? React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다.Facebook이 관리하며, 단일 페이지 애플리케이션(SPA) 개발에 자주 사용된다. 리액트(React)의 특징 1. 컴포넌트 기반 아키텍처2. props & state3. 가상 DOM(Virtual DOM)4. JSX(Javascript XML) * 컴포넌트 기반 아키텍처 React의 컴포넌트 기반 아키텍처는 이 라이브러리의 가장 큰 특징 중 하나이다.컴포넌트는 자신만의 UI와 기능을 담당하는 재사용 가능한 코드 객체이며 크게 두 가지 종류가 있다. 클래스 컴포..