본문 바로가기

SMALL

React.js

(18)

React에서 zustand 써보기 2(비동기처리, 스토리지저장, 데브툴즈) 어제 저녁까지 공부한 내용인데, zustand가 사용성이 굉장히 좋은 것 같다. recoil아니면 zustand가 사용성도 좋고, react 문법과 구조도 비슷해서 편리한 것 같다. 솔직히 근본은 redux라고 하던데, redux는 너무 복잡하게 느껴진다. 아무튼, 이번글에서는 zustand에서 다양한 기능들을 알아볼 것이다. 지난번글에서는 zustand를 이용해서 store를 만들고, 저장하고, 가져와서 사용했었는데, 실제로는 더 다양한 기능들이 있겠지만, 기본적인 기능들을 알아보도록하자. 1. 스토리지저장 스토리지저장은 persist라는 메소드를 사용하면 된다. persist는 zustand/middleware 안에 있고, zustand 설치했으면 그냥 사용할 수 있다. - 사용법은 zustand로 ..

React에서 zustand 써보기 리액트에서 쥬스탄드를 써보자 이것도 쉬운편인것같다. 1. npm i zustand 통해서 라이브러리 받아온다. 2. store.js 만든다. 3. create를 통해서 store를 생성한다. - create는 set이라는 걸 가지고 있다. - set은 state들을 가지고 있는데, 여기서는 count 밖에 없다. import { create } from "zustand"; export const useConterStore = create((set) => { return { count: 0, increment: () => set((state) => ({ count: state.count + 1 })), reset: () => set({count: 0}), setNumber: (number) => set({..

React에서 Recoil 써보기 React에서 다른 상태관리 라이브러리 쓰는거보다 이질감없이 사용할 수 있어서 좋았다. Todo List를 만들어 보았는데, 내용을 따라가면서 정리해보도록하자. 1. npm install recoil 명령어를 통해서 recoil 라이브러리를 받아온다. 2. index.js안에 App 컴포넌트를 RecoilRoot 로 감싸준다. - 그럼 전역에서 Recoil로 만든 상태를 쓰는 준비는 끝이다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { Reco..

React에서 MobX 사용해보기 3(react context 사용해서 observable 공유하기 mobx 사용해보기 1에서 연장된 내용으로 보면된다. context 를 사용하면 여러 곳에서 상태를 공유할 수 있는데, 기억이 잘 안난다. 다시 한번 찾아봐야 할 것 같다. 아무튼 사용방법을 정리하자면 context 생성 -> provider에 props로 store 공유하기 -> usecontext 로 원하는 곳에서 state사용하기 뭐 이런 식인데 코드를 보자 1. context 생성 - 일단 여기서는 context 생성만 보도록 하자 - react에서 createContext 가져와서 만들어준다. import { createContext, useContext } from "react"; // Context 생성 export const CounterContext = createContext(); //..

React에서 mobx 사용해보기 2 (decorator) mobx 옛날 버전에는 decorator라는 걸 이용했다는데 지금은 첫번째 글에 있는것 처럼 사용하는걸 추천한다고 한다. 그래도 옛날 꺼 읽을 줄 알아야하니까 써봤다. react에서 javascript로 쓰려면 webpack이랑 bable 설정하고 package 다운받아야할 것도 많은데, 잘 따라해봤다. 근데 typescript쓰면 그냥 된다고 한다. 맨아래 부분에 package.json이랑 webpack,babel 설정 내용 복붙해놓겠다. 아무튼 중요한 건 그거 설정하는게 아니다. 왜냐면 이젠 안쓰는걸 지향하기 때문이란다. 그래서 decorator라는 걸 쓰는 예전 방식은 뭐가 다른지 알아보자 [index.js] - store 인스턴스 만들어서 props로 App컴포넌트에 내려주는거 동일하 import..

React에서 MobX 사용해보기 1. npx create-react-app 으로 리엑트 설치하기 2. npm install mobx 로 몹엑스 설치하기 - countStore.js를 생성했다. - class로 생성하라고 강의에서 알려줬다. - 여러가지 기능이 있는거 같은데 observable이 공유할 녀석이다. - computed 는 계산에 따른거, 여기서는 count의 상태에 따라 바뀔 것 인거 같다. - action은 동작 - 나머지 잘 만들어주면 된다. import { action, computed, makeObservable, observable } from "mobx"; export default class counterStore { count = 0; constructor() { makeObservable(this, { co..

react redux 기초4(applyMiddleware, thunk) applyMiddleware는 redux에서 dispatch할 때, 값이 reducer에 전달되기 전, 그 사이에 API 호출할 수 있게 해주는 미들웨어라고 한다. 로깅, 충돌보고, 비동기 API 통신, 라우팅 등을 할 때 쓰는거라는데 안쓰면 어찌되는지 확인할 능력이 아직 없다 그래서 어찌 쓰느냐 import { applyMiddleware } from 'redux'; 리덕스에서 applyMiddleware 데려오면 미들웨어를 쓸 수 있다. 여기서 예제하나 돌려보자 const loggerMiddleware = (store: any) => (next: any) => (action: any) => { console.log("store", store); console.log("action", action); ..

React Redux 기초3(Provider, useDispatch, useSelector) Provider는 React에서 Redux 사용할 때, Redux store를 중첩 요소 전역에서 액세스할 수 있도록 하는 것이라고 함 1. react-redux 설치 npm i react-redux --save 2. App 컴포넌트를 Provider로 감싸고, 만들어둔 store를 props로 전달하기 3. store에 값 전달하기 1) useDispatch 생성 import { useDispatch } from 'react-redux'; react-redux에서 useDispatch를 가져온다 const dispatch = useDispatch(); 변수에 할당한다. dispatch({ type: "ADD_TODO", text: todoValue }); dispatch의 매개변수로 객체를 할당한다. ..

이전 1 2 3 다음

LIST

티스토리툴바