React

개요 상태관리 라이브러리는 Redux, Zustand, Recoil 등 여러 가지가 존재합니다. Redux는 알다시피 큰 사용자 커뮤니티를 가지고 있습니다. 관련된 미들웨어, 문서 등등 많은 것이 존재하고 최근 들어 Recoil, Zustand도 많이 사용하는 추세라고 합니다. Recoil이란? Recoil은 Facebook에서 만든 상태 관리 라이브러리입니다. Recoil은 Redux의 비해 간편하게 사용이 가능합니다. Redux는 대규모 프로젝트에 어울리지만 간단하게 사용하기엔 조금 과한 느낌이 있습니다. Recoil을 사용하면 간편하고 적은 코드로 구현이 가능하게 됩니다. Recoil 개념 Atoms const numberState = atom({ key : "numberState" // 고유한 값..

React Query 기본 사용법은 여기에 정리 되어있습니다. React Query를 사용해서 비동기적으로 데이터를 가져와보자! 개요 원래는 axios를 사용해서 데이터를 가져와 데이터바인딩을 해주었습니다. 새로운 기술스택을 배워보고자 최근에 개인 프로젝트에 사용해보지 않았던 React Query를 사용해 보기로 했습니다. Re banal7.tistory.com 개요 React Query를 이용해서 무한스크롤을 만들려면 React Query안에있는 useInfiniteQuery을 사용하면 됩니다. /*useInfiniteQuery의 구조 */ const { fetchNextPage, fetchPreviousPage, hasNextPage, hasPreviousPage, isFetchingNextPage,..

Redux란? Redux는 JavaScript앱의 상태 관리 라이브러리 입니다. Redux는 단방향 데이터 흐름을 갖추고 있고, 애플리케이션의 상태를 예측이 가능해지고 추적이 가능하게 만들어줍니다. 이것을 통해 상태 관리가 단순해집니다. Redux 의 3가지 원칙 전체 상태값을 하나의 객체로 저장한다. 상태값은 불변 객체 상태값은 reducer 에 의해 변경되어야 한다. Redux의 Action redux의 action은 state에 변화를 주기위한 동작을 의미합니다. action은 객체이며, 객체 안에는 type 과 payload을 가지고 있습니다. { type: 'ADD_TODO', payload: { text: 'Do something.' } } type은 고유값 payload에 파라미터로 넣을수 ..

개요 원래는 axios를 사용해서 데이터를 가져와 데이터바인딩을 해주었습니다. 새로운 기술스택을 배워보고자 최근에 개인 프로젝트에 사용해보지 않았던 React Query를 사용해 보기로 했습니다. React Query란? React Query는 React에서 데이터를 관리하기 위한 라이브러리 입니다. API 호출 과 데이터 캐싱을 간편하게 처리하기 위해서 사용되고 있습니다. React Query 사용방법 React Query는 v3과 그 이후 버전이 있는데 설치법이 조금 다릅니다. npm install react-query // v3 npm install @tanstack/react-query // v4 이후 버전 저는 최신버전을 선호하기 때문에 @tanstack/react-query을 설치했습니다. v..

최근에 프로젝트를 들어가 카카오맵을 사용해야 하는 일이 생겼습니다. 그래서 React에서 카카오맵을 사용하는법을 간단하게 설명해 보려고 합니다. React에서 카카오맵을 사용할 때 가장 좋은 방법이 뭐가 있을까 찾아봤을 때 react-kakao-maps-sdk라는 라이브러리가 존재했으며 심지어 설명도 굉장히 간편하게 되어있고 typescript 사용할 때 부분도 적혀있어 굉장히 좋았습니다. https://react-kakao-maps-sdk.jaeseokim.dev/ Hello from react-kakao-maps-sdk docs | react-kakao-maps-sdk docs Description will go into a meta tag in react-kakao-maps-sdk.jaeseokim..

화면에 데이터를 불러오고 있을 때 빈화면을 보여주기에는 조금 이상할 때가 가끔 있습니다. 빈화면보다는 로딩화면을 보여주고 데이터가 모두 불러와졌을 때 로딩화면을 보여주는 게 훨씬 낫지 않을까요? 그래서 오늘은 Suspense을 통한 로딩화면을 구축해 보겠습니다. Suspense란? Suspense는 하단에 있는 일부 컴포넌트가 아직 렌더링 할 준비가 되지 않은 경우 로딩화면을 나타내주도록 도와주는 컴포넌트입니다. Suspense를 사용하기 위해서는 React의 lazy loading을 사용해야 합니다. lazy loading 은 간단하게 사용가능합니다. 일반적으로 컴포넌트를 불러올 때는 import 문을 사용합니다. lazy loading import 문을 똑같이 사용하지만 방법이 조금 다릅니다. con..