React에서 XState 간단 사용 후기 😊

XState는 점점 더 단순화되어가는 상태관리 라이브러리들 중에서 좀 더 명확하게 역할을 나누고 책임을 부여한 컨셉의 상태관리 라이브러리이다. ❗ 이런 특징이 redux의 구조와 비슷하게 느껴지기도 한데, 이에 관해서는 직접 제작자가 밝힌 차이점이 있다.https://stackoverflow.com/questions/54482695/what-is-an-actual-difference-between-redux-and-a-state-machine-e-g-xstate What is an actual difference between redux and a state machine (e.g. xstate)?I am working on investigation of one front-end application o..

• format_list_bulleted React
• · 2025. 2. 13.
• textsms

useReducer의 장점 알아보기 (vs useState)

useReducer의 존재는 알고있었고, useState를 대체한다는 점 역시 알고있었다. redux의 dispatch나 reducer 개념이 useReducer로부터 비롯되었다는 것도 알았지만- 실제로 무슨 장점이 있기에 useState대신 useReducer를 쓰는가에 대해서 진지하게 생각해본적이 없었다는 것을 알게 되었다. 따라서, 이번 기회에 useReducer의 장점에 대해서 기록해보고자 하였다. 🐥 닉네임과 보유한 캐시를 상태로 가지는 컴포넌트를 가정하고, useState와 useReducer를 비교해보는 예제를 만들었다. 일단, useState를 사용한 예제이다. import { useState } from "react"; export default function App() { const ..

• format_list_bulleted React
• · 2023. 7. 15.
• textsms

reduxjs/toolkit 더 자세히 알아보기 (typescript 적용)

예전에 역시 redux toolkit을 사용해보고 글을 남긴적이 있었다. https://citron031.tistory.com/entry/Redux-Toolkit-rtk-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 Redux Toolkit (rtk) 사용하기 로그인 정보를 전역 상태로 사용하기 위하여 redux를 사용하기로 마음먹었다. 자연스럽게 일단 전역 상태를 저장할 store를 만들기 위해 createStore를 불러왔는데, 다음과 같은 상황에 처했다. 커서 citron031.tistory.com 단순한 사용법에 대해서 작성했었는데, 타입스크립트의 적용이나 dev tool 사용하는 법 등 좀 더 사용하고 알게된 점들에 대해서 추가로 남기기로 하였다. import {configu..

• format_list_bulleted React
• · 2023. 2. 27.
• textsms

간단하게 Redux Saga 사용하기

redux saga는 redux의 미들웨어로 비동기 액션을 처리하기 위해서 사용하는 라이브러리이다. redux thunk에 비해서 더 많은 기능을 제공하기에 애용되는 라이브러리이다. 다소 설정이 복잡하지만, 반복되는 패턴이 많고 많은 기능을 제공한다. 스토어에 미들웨어 연결하기 ... import {legacy_createStore as createStore, compose, applyMiddleware} from "redux"; import createSagaMiddleware from "@redux-saga/core"; import reducer from "../reducers"; import rootSaga from "../sagas"; const sagaMiddleware = createSagaM..

• format_list_bulleted React
• · 2023. 1. 3.
• textsms

ContextAPI 사용하기

리액트의 코어 라이브러리로 ContextAPI는 redux, recoil, mobX와 같은 라이브러리와는 다르게 설치 없이 사용할 수 있다. 최상위 컴포넌트부터 최하위 컴포넌트까지 모두 동일한 상태를 만들고 사용하기 위해서 ContextAPI와 같은 전역 상태 관리 도구를 이용할 수 있다. // store.js import React, { useState } from "react"; export const MyContext = React.createContext(); const StateStore = (props) => { const [color, setColor] = useState("black"); const [direction, setDirection] = useState("row"); return..

• format_list_bulleted React
• · 2022. 11. 14.
• textsms

상태관리 라이브러리 Redux

Redux는 자바스크립트 어플리케이션에서 예측 가능한 상태의 관리를 해주는 container이다. 상태 관리를 위한 전역 상태의 저장소를 제공한다. Redux는 react의 하위 라이브러리가 아니고, 자바스크립트 어플리케이션이라면 사용이 가능하다. 컴포넌트간의 정보 공유가 필요할 때, 복잡성을 줄이기 위해서 상태관리 라이브러리인 redux를 사용한다. // NPM 으로 설치 npm install redux // Yarn 으로 설치 yarn add redux 참고 자료 : https://ko.redux.js.org/introduction/getting-started Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org Redux의 세 가지..

• format_list_bulleted JavaScript
• · 2022. 11. 12.
• textsms