Redux는 앱의 상태(state)만을 관리하기 때문에 React, Angular, Vue 등 어느 웹 프레임워크와도 잘 어울립니다. 이번 글에서는 지난 글에서 작성했던 Todo 앱을 React 앱으로 작성하면서 어떻게 활용될 수 있는지 알아보도록 하겠습니다.
React 관련된 프로젝트를 살펴보면 거의 빠지지 않고 등장하는 라이브러리가 바로 Redux입니다. React를 사용하기 전에도 이름 정도는 들어봤던 라이브러리지만 구체적으로 뭘 하는 라이브러인지, 사용하면 어떤 점에서 이점이 있는지 등은 잘 모른 채로 지나갔었습니다. 최근에 프로젝트의 프론트 개발을 React로 진행하면서 다시금 관심을 갖게 되었는데, 그 과정에서 배운 점들을 남겨봅니다.
TypeScript로 개발을 진행하던 중 발생한 에러가 생각지도 못한 원인에서 비롯된 경험을 이곳에 남겨봅니다. 나중에 또 실수할 저를 위해.
과제로 웹 프로젝트를 진행하면서 front-end에 react를 적용해보기로 했습니다. 이미 Javascript 대신 TypeScript를 적용했을 때의 이점을 node.js에서 이미 경험했기 때문에 이를 프론트 개발에서도 맛보고 싶다는 욕구가 있었습니다.
Javascript를 사용하는 React는 .js
파일 대신 .jsx
라고 하는 파일에 코드를 작성하는데, 이와 유사하게 TypeScript에서는 ‘.tsx
파일로 React 환경을 지원하고 있습니다.
마침 TeypScript 문서에도 TypeScript로 React 프로젝트를 작성하는 가이드를 제공하고 있어서 이를 번역 겸 정리해봤습니다.