728x90 반응형 Redux5 [React] Zustand 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Zustand 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Zustand란? zustand는 react에서 사용할 수 있는 상태 관리 라이브러리 중 하나로 redux와 같이 flux 패턴을 활용하는 기술 중 하나입니다. react에서 활용되는 상태 관리 라이브러리들은 여러 개가 있는데 대표적으로 redux, zustand, jotai, recoil 등이 존재하며 최근 npm 트렌드를 확인해 보면 redux 다음으로 가장 많이 활용되는 라이브러리라고 볼 수 있습니다. react를 처음 배울 때 최초로 사용해봤던 상태 관리 라이브러리는 redux인데 전역으로 데이터를 관리하기 위해 이렇게 까지 코드가 장황해야 하는 생각이 들었던 기억이 있습니다. 그래서 .. 2023. 6. 29. [React] Hooks - useReducer 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useReducer에 대해 적어보는 시간을 가져보려고 합니다. useReducer란? useReducer는 hooks에서 useState와 동일하게 데이터 변화에 따른 반응성을 제공해주는 역할을 담당합니다. ※ [React] Hooks - useState 하지만 useState와의 차이점은 명확합니다. 일반적으로 리액트를 이용하여 개발하다 보면 보통 useState를 이용하여 데이터에 반응성을 제공해주고는 합니다. 여기서 만약 사용해야 되는 하위 변수값들이 많을 경우 어떻게 될까요? 예를 들어 A라는 객체에 해당되는 변수가 10개, B라는 객체에 해당되는 변수가 10개 있다면 각각의 useState들이 어떤 목적을 위한 데이터인지가 점점 헷갈리기 시작.. 2021. 9. 27. [React] 함수형 컴포넌트 + 타입스크립트 환경에서 Redux 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 함수형 컴포넌트 + 타입 스크립트 환경에서 redux 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 redux가 무엇인지에 대해 궁금하신 분은 여기를 참고해주시면 됩니다. Redux 사용 방법 이번에 redux를 설정하여 최종적으로 확인해볼 것은 다음과 같습니다. store에 num값을 저장 파라미터 값만큼 num의 값을 증가시키는 액션 함수 정의 파라미터 값만큼 num의 값을 감소시키는 액션 함수 정의 증가와 감소 버튼을 누를 경우 num의 값이 실시간으로 변화되는 것을 확인 [ 1. 패키지 설치 ] $ npm install redux react-redux @types/react-redux redux-devtools-extension .. 2021. 8. 9. [React] 함수형 컴포넌트에서 Redux 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 함수형 컴포넌트에서 Redux 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 글을 작성하기에 앞서 redux가 무엇인지 궁금하신 분들은 여기를 참고하시길 바랍니다. Redux 설정 이번에 redux를 설정하여 해볼 것은 다음과 같습니다. store에 num값을 저장 파라미터로 넘어오는 값만큼 num값을 증가시키는 액션 함수 정의 파라미터로 넘어오는 값만큼 num값을 감소시키는 액션 함수 정의 view에서 store에 저장되어 있는 num값을 확인하며 실시간으로 변경까지 되는 것을 확인 [ 1. 패키지 설치 ] $ npm install redux react-redux redux-devtools-extension [ 2. action함수 저장 파일 생성 ].. 2021. 7. 17. [React] Flux와 상태관리, 그리고 Redux 안녕하세요. J4J입니다. 이번 포스팅은 redux와 관련된 개념들에 대해 적어보는 시간을 가져보려고 합니다. Flux 패턴 redux를 알기 전에 가장 먼저 flux패턴이 무엇인지에 대한 개념이 잡혀있으면 좋다고 생각합니다. flux패턴의 등장배경에는 페이스북의 일화가 있습니다. 한때 페이스북에서 알림이 와있다고 표현되고 있지만 막상 알림을 클릭하게 되면 어떠한 알림도 오지 않았던 버그가 있었다고 합니다. 버그를 수정하고 수정을 해도 계속적으로 버그가 재 등장함에 따라 이 문제를 명확하게 해결할 수 있는 방안을 고안했고 그 결과 새로운 아키텍처인 flux패턴을 만들어 해결했다고 합니다. flux패턴은 기존에 사용되던 mvc패턴의 단점을 보완하고자 등장한 패턴입니다. mvc패턴은 사용자 인터페이스와 비즈.. 2021. 7. 14. 이전 1 다음 728x90 반응형
