탕구리's 블로그

이번 포스팅에서는 React에서 비동기 API를 사용하는 방법에 대해서 알아보겠습니다. 상태 관리에 대해서는 앞에서 배운 Redux를 활용하여 진행하고 비동기 처리를 위해 Redux 미들웨어인 Thunk를 사용합니다. 미들웨어 없이 비동기 처리를 시도해보았으나 안 되는 것 같아서 미들웨어를 사용하게 되었습니다. 비동기 API 예제를 만들어보자! 우선, 만들고자 하는 기능은 아래 이미지와 같습니다. 동작 과정 1. 버튼에 클릭하면 API를 발생시킵니다. 2. 비동기로 동작하기 떄문에 API 요청에 대한 결과가 오기 전에는 "Loading" 문구를 화면에 랜더링 해줍니다. 3. 비동기 요청이 완료된 경우 데이터를 화면에 랜더링 해줍니다. 4. 에러가 발생한 경우에는 "error"를 화면에 랜더링 해줍니다. ..

지난 포스팅에 Reducer를 생성하는 부분까지 진행했었는데요. 오늘은 스토어(store)를 생성하고 열심히 생성한 Reducer와 연결시켜주는 부분에 대해서 알아보겠습니다. 이번 포스팅은 양이 많지 않으니 조금은 마음 편하게 읽어 내려가셔도 될 것 같아요! 스토어는 무슨 역할을 할까? 애플리케이션의 상태를 저장하고 getState()를 통해 상태에 접근하게 하고 dispatch(action)를 통해 상태를 수정할 수 있게 하고 subscribe(listener)를 통해 리스너를 등록합니다. 하나의 어플리케이션에선 하나의 스토어만 운영하는 것을 지향합니다. 각종 상태와 액션을 관리하는 코드가 복잡해지는 경우 리듀서를 분리(리듀서 쪼개기)하여 관리하지만 최종적으로 하나의 리듀서(리듀서 재조합)의 형태로 만..

지난 포스팅에서 리덕스에 대한 내용을 간단히 알아보았습니다. 이번 포스팅에서는 간단한 예제들을 따라 해 보며 리덕스에 조금 더 익숙해지는 시간을 가져보도록 합시다. 지난 포스팅에서 리덕스의 세 가지 핵심 개념에 대해서 언급했었는데요. 가장 먼저 액션에 대해서 알아봅시다. 액션은 애플리케이션에서 스토어로 보내는 데이터 묶음입니다. 이들이 스토어의 유일한 정보원이 됩니다. 여러분은 store.dispatch()를 통해 이들을 보낼 수 있습니다. 라고 나와 있습니다. 액션이 생성되면 상태가 변화될 때 dispatch를 통해 reducer로 보내주게 되는 구조라고 언급했었습니다. 액션을 다루면서 해주어야 할 작업은 "액션 타입 선언"과 "액션 생성 함수"를 만들어 주는 것입니다. 액션 타입 선언 # 액션 타입 ..

오늘은 컴포넌트의 상태 관리를 도와주는 Redux(리덕스)에 대해서 공부를 해보려 합니다. 저도 리덕스에 대해서 자세히 모르는 상태입니다. 다 같이 공부하는 느낌으로 한번 정리해보는 시간을 갖도록 하겠습니다. 우선, 기본적인 개념을 알기 위해 리덕스 도큐먼트를 구경 갑니다. 총총... 리덕스란? Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. (워드프레스 프레임워크인 Redux Framework와 혼동하지 마세요.) Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공합니다. 글을 읽고 리덕스가 무..