JavaScript/React20 Zustand vs Context API 항목ZustandContext API종류외부 상태 관리 라이브러리React 내장 기능목적전역 상태 간단하고 효율적으로 관리전역 상태 전달 목적 (주입)상태 업데이트구독 기반 (Selective rendering)모든 하위 컴포넌트가 리렌더링복잡도간단한 문법, 빠른 설정Provider/Consumer 구조 필요의존성있음 (zustand 설치 필요)없음 (React 내장) 구독 기반? 📌 Context API// CounterContext.tsxconst CounterContext = createContext(null)const CounterProvider = ({ children }) => { const [count, setCount] = useState(0) const increase = () =>.. 2025. 6. 30. d 2024. 3. 19. [React] 라이브러리 없이 자동 슬라이드 구현 ✨ 구현된 모습 새 프로젝트에서 배너를 만들게 되었는데 라이브러리 없이도 할 수 있을 것 같아서 간단하게 만들어 보았다! 일단 가볍게 시도해본거라서 무한 슬라이드까진 아니고, 마지막 배너라면 다시 처음으로 돌아가게끔 설계했다. 이게 문제점이 배너가 4개면 괜찮은데 배너가 2개뿐이거나 혹은 배너가 아주 많을 때는 돌아가는게 너무 어지러워서...😵💫 조만간 무한 슬라이드로 수정하지 않을까 싶다. 👩💻 전체 코드 CSS const BannerArea = styled.div` width: 100%; aspect-ratio: 5/2; // 종횡비 position: relative; margin-bottom: 2rem; `; const BannerList = styled.div` display: flex; po.. 2024. 1. 10. [React] input type date 아이콘 커스텀 ✨ 구현된 모습 CSS const SearchYM = styled.input` font-family: var(--font-Pretendard-Regular); font-size: 23px; font-weight: bold; border: 0px; &:focus { outline: none; } // 날짜 선택 아이콘 커스텀 &::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator { background: url("/image/icon_DateA.png") center center no-repeat; cursor: pointer; &:hover { background-color: #eeeeee; border-radius: 20px; } } `;.. 2023. 12. 27. 이전 1 2 3 4 5 다음
