반응형 React3 😀 React Custom Hook React Custom Hook 이란React에서 Custom Hook(커스텀 훅) 은 여러 컴포넌트에서 반복되는 상태(state) 및 로직을 재사용하기 위해 만드는 함수 React의 기본 Hook(useState, useEffect 등)을 조합해서 직접 만드는 Hook이라고 생각하면 된다. useCounter를 통해 CustomHook 배우기// useCounter.tsimport { useState } from "react";function useCounter(initialValue = 0) { const [counter, setCounter] = useState(initialValue); const increase = () => setCounter((prev) => prev + 1); cons.. 2026. 6. 2. ⚽️Zustand 🛺 Zustand란React 상태 관리 라이브러리🚜 create 함수Zustand에서 상태 저장소를 만드는 함수import { create } from "zustand";interface SeatInterface { seatNumber: number; setSeatNumber: () => void;}/* Create를 통해 저장소 생성 */export const useSeatStore = create((set) => ({ seatNumber: 0, setSeatNumber: () => set({ seatNumber: 1 }),})); 🚍set 함수상태를 업데이트 하는 함수import { create } from "zustand";interface SeatInterface { seatNum.. 2025. 12. 1. 🍏 React Hook 🍇 useStateuseState훅은 지역컴퍼넌트에서 데이터를 사용하기 위한 react hook이다값이 변경될때마다, 리렌더링이 되는 특성이 있다. 예시import { useState } from "react";type UserType = { name: string; age: number;};export default function State() { // 1. useState 사용할 객체 선언 const [user, setUser] = useState({ name: "", age: 0, }); const onClickChangeName = () => { // 객체 값 변경 setUser((prev) => { return { ...prev, .. 2025. 10. 24. 이전 1 다음 반응형