Jun's TID

리액트 웹 App에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 한다. 예를 들어, 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 한다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 한다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, 미들웨어를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있다. 우선, 미들웨어를 사용해보기 전에 간단한 작업 환경을 만들어주자. 작업 환경 준비 리덕스로 상태를 관리하는 간단한 카운터 예제를 우선 만들고, 그 위에 미들웨어를 적용해보자. ◎modules/counter.js imp..

이번에는 리덕스를 사용하여 리액트 App의 상태를 관리하는 방법을 알아보려고 한다. 리액트 App에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지보수 하는데 큰 도움이 된다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화할 수도 있다. 리액트 프로젝트에서 리덕스를 사용하기 위해서는 npm install react-redux npm install redux 를 사용하여 라이브러리를 설치하고 사용한다. 리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것이다. 여기서 프레젠테..