Front-end/React (3) 썸네일형 리스트형 Zustand 사용 전역 상태 관리 패키지 1. src/stores/storeButton.jsx 생성 import { create } from "zustand"; const useButtonStore = create((set) => ({ count: 0, selectedButton: null, setSelectedButton: (button) => set({ selectedButton: button }), incrementCount: () => set((state) => ({ count: state.count + 1 })), removeCoutn: () => set({ count: 0 }), })); export default useButtonStore; - 오브젝트 형태의 전역 상태 useButtonStore은 변수와 함.. Axios로 서버에 http 요청 보내기 1. axios를 설치한 후 import한다. npm i axios import axios from "axios"; 2. 버튼에 event handler를 등록하고, 그 안에서 axios로 http 요청을 보낸다. // event handler const handleAdd = async () => { await axios.post("https://react-todo-server-donghwan.koyeb.app/add", { task, }); const result = await axios.get( "https://react-todo-server-donghwan.koyeb.app/get" ); console.log(result); setTodos(result.data); inputRef.current.v.. useRef 사용법 uesRef는 component의 entire lifetime동안 지속되는 object를 생성한다. (component의 unmount까지 유지된다.) 하지만 obejct의 current 속성을 이용해 변수의 값에 접근할 수 있다. useRef로 생성된 object는 state와 다르게 component의 re-render시에도 변하지 않는다. (re-render에 영향을 받지 않는다.) import { useState,useRef } from "react"; export default function MyComponent_19_1(){ const [count,SetCount] = useState(0) const countRef = useRef(0) let countVar = 0 const increme.. 이전 1 다음
