FE/React7 Zustand vs TanStack Query, 같이 쓰자! 🐻요즘 프론트엔드 프로젝트에서 Zustand + TanStack Query가 자연스럽게 같이 등장한다.처음에는 둘 다 상태 관리처럼 보여서 이거 둘 중 하나만 쓰면 되는 거 아닌가? 싶었는데 역할이 완전히 다르다.이번 글에서는 실제 로그인 플로우를 구현하면서 느낀 차이를 정리해본다. 1. Zustand는 무엇인가?Zustand는 전역 상태 관리 라이브러리다.Redux보다 훨씬 간단하고, 보일러플레이트도 거의 없다.프론트 내부 상태를 저장하는 곳으로,예를 들면 로그인 모달 열림 여부, 다크모드 상태, 사이드바 열림/닫힘, 사용자가 선택한 탭 이런 것들을 저장한다. 사용예import { create } from 'zustand'export const useStore = create((set) => ({ .. 2026. 3. 15. 기존 Vite + React 프로젝트에 TypeScript 추가하기 (마이그레이션 정리) 📚사이드 프로젝트를 새로 시작했다.기존에 세팅은 되었던 프로젝트라, Vite + React(JavaScript) 프로젝트에 TypeScript를 추가하면서 겪었던 과정과 필요한 설정을 정리해보았다.1. TypeScript 설치먼저 프로젝트에 TypeScript와 React 타입을 설치한다.npm install -D typescript @types/react @types/react-dom설치가 완료되면 TypeScript 설정 파일을 생성한다.npx tsc --init그러면 프로젝트 루트에 tsconfig.json 파일이 생성된다. 2. tsconfig.json 설정기본 생성된 tsconfig.json을 Vite 환경에 맞게 일부 수정했다.{ "compilerOptions": { "target":.. 2026. 3. 12. "리액트는 가상 DOM을 사용하여 성능을 최적화합니다." 가 무슨 말이야? 💭 서론프론트엔드를 공부하다 보면 한 번쯤은 이런 문장을 보게 된다.“리액트는 가상 DOM(Virtual DOM)을 사용하여 성능을 최적화합니다.” 그런데 처음 보면 이게 무슨 말인지 꽤 추상적으로 느껴진다.이 문장이 실제로 무엇을 의미하는지, 그리고 왜 성능이 좋아지는지 정리해보았다.1. DOM이란 무엇인가?먼저 DOM(Document Object Model)부터 이해해야 한다.웹페이지는 내부적으로 DOM 구조로 관리되는데, 쉽게 말하면브라우저는 우리가 작성한 HTML을 그대로 사용하는 것이 아니라 트리 구조의 객체 형태(DOM)로 변환해서 관리한다. 예를 들어 제목 내용이 코드는 브라우저 내부에서 다음과 같은 구조로 관리된다.bodyh1p이러한 구조를 DOM이라고 한다. 2. 문제: DOM을 직.. 2023. 9. 13. 클릭 이벤트로 알아보는 React vs 바닐라 JavaScript 핵심 차이 💭 서론리액트로 여러개의 버튼 중 클릭하면 하나의 버튼에만 active 클래스를 추가해주는 이벤트를 구현하면서 갑자기 헷갈렸던 경험이 있다.간단한데 바닐라 JS에서 리액트로 바뀌었을 뿐인데 헷갈리더라. 클릭 이벤트로 active 클래스를 제어하는 방식을 기준으로 바닐라 자바스크립트와 리액트의 핵심 차이를 정리해보았다. ✅ 바닐라 JavaScript 방식바닐라 JS에서는 DOM을 직접 선택하고 클래스를 직접 추가/제거한다.const tabs = document.querySelectorAll(".tab");tabs.forEach((tab) => { tab.addEventListener("click", () => { tabs.forEach((t) => t.classList.remove("active".. 2023. 5. 9. 리액트 찍먹 3 - Component 컴포넌트 컴포넌트는 쉽게 말해 UI를 구성하는 UI 요소를 의미한다. 리액트 홈페이지의 공식 문서에 따르면 컴포넌트를 사용하면 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다고 설명한다. '재사용 가능'과 '개별적으로 살표 볼 수 있음'이 핵심이라고 볼 수 있을 것 같다. 컴포넌트는 간단히 이런식으로 사용할 수 있다. 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다. 함수 안에 UI를 제작하여 컴포넌트를 사용할 부분에 HTML 태그를 사용하는 것 처럼 을 써주면 되는 것! 이로써 HTML을 줄여 쓸 수 있는 것이다. 이렇게 함수로 작성한 컴포넌트를 함수 컴포넌트라고 호칭하고 ES6의 class를 사용하여 정의할 수도 있는데 클래스 컴포넌.. 2023. 4. 21. 리액트 찍먹 2 찍먹 과정인 만큼 리액트로 간단하게 블로그 UI를 구성 했다! 1. navbar 생성 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 차례대로 App.js와 App.css App.js의 필요없는 부분을 모두 삭제하고 네이게이션 bar만 간단히 생성했다. (정말 구색용 ㅎㅎ..) class 대신 className을 사용할 것! 자동완성 덕분에 헷갈릴 일은 없다. 반응형도 잘 적용 되었다! 2. 제목과 내용을 보여주는 List - state로 변수 만들기 HTML 삽입 미리보기할 수 없는 소스 state로 제목 데이터를 저장했다. App() 함수의 return 위에 작성해주면 된다. state를 사용하려면 js 파일 최상단에 꼭 import React, { useState } .. 2023. 4. 14. 이전 1 2 다음
