Web13 [React] TanStack-Query(React-Query) 가이드(w.useQuery, useMutation, QueryClient) 저번에 react-query 개념적인 부분에 대해서 포스팅해보았다.react-query에 대해서 좀 더 공부해보니 TanStack-Query 라는 이름으로 변경되었더라.이제 react 뿐만 아니라 vue나 angular에서도 쓸 수 있도록 업데이트를 한 것 같다. 그래서 이름을 TanStack-Query 으로 변경한 이유.아무튼 tanstack-query 라이브러리에 대해 좀 더 디테일하게 알아보자!🎯 개요Tanstack Query(React-query)은 React 애플리케이션에서 서버 상태(Server State) 관리를 쉽게 해주는 라이브러리이다.주요 기능 : 데이터 패칭(Fetching), 캐싱(Caching), 동기화(Synchronization), 업데이트 및 에러 처리를 선언적이고 효율적으.. 2025. 11. 10. [React] react-hook-form 을 활용해 쉽고 편하게 폼(form) 관리하기 React로 애플리케이션을 개발할 때 등록/수정 기능을 구현하기 위해 폼(Form)이 안쓰는 곳이 없다.폼은 단순히 데이터를 입력받는 것을 넘어, 아래와 같은 요구사항을 동반한다. 입력값에 따른 실시간 유효성 검사(ex. “이메일 형식이 아닙니다.”)폼 제출(submit) 시 전체 데이터 유효성 검사유효성 검사 실패 시 에러 메시지 표시폼 제출 중 로딩 상태 관리폼 초기화 또는 특정 값 동적 변경이를 보통 useState 와 onChange 이벤트 핸들러로 해결하려 한다. 하지만, 두 이벤트 핸들러로 해결 시 코드량도 많아질 뿐더라 관리가 힘들다. 이를 쉽게 하기 위해 react-hook-form 라이브러리를 활용해 해결해 볼려고 한다. 1. React 폼의 기본, ‘제어 컴포넌트’ (Controll.. 2025. 10. 30. [React] 리액트 쿼리에 대해서 리액트 쿼리에 대해서 알아보려고 한다. 서치를 해보니 엄청엄청 편하고 좋은 라이브러리인 것 같다. 이에 대해서 정리해보자. 리액트 쿼리란?지금 TanStack Query로 이름이 바뀌었으며, 리액트 애플리케이션에서 서버 상태를 효율적으로 관리할 수 있게 도와주는 라이브러리이다.쉅게 말해, 서버에서 데이터를 가져오고(fetching), 캐싱하고, 동기화하며, 업데이트하는 복잡한 작업을 훨씬 간단하고 선언적으로처리하도록 돕는 도구.리액트 쿼리를 사용하는 이유?Redux나 Recoil 같은 다른 상태 관리 라이브러리들이 주로 클라이언트 상태 관리를 위해 설계된 반면,리액트 쿼리는 서버 상태 관리에 특화되어 있다.서버 상태와 클라이언트 상태의 차이Redux나 Recoil이 다루는 상태는 주로 클라이언트 상태이다.. 2025. 10. 20. [React] react (vite)project 기본적인 개발 구조 설계 Vite로 새 프로젝트를 생성하면 기본적인 폴더 구조가 제공된다. 실제 개발을 위해서는 페이지와 기능을 효율적으로 관리할 수 있도록 기초적인 뼈대를 만드는 작업이 필요하다.기본 폴더public : 빌드 과정에서 특별한 처리 없이 그대로 유지되는 정적 파일이 위치하는 곳이다. 주로 파비콘(favicon)이나 robots.txt 파일 등이 여기에 해당된다.assets : 컴포넌트 내부에서 직접 불러와 사용하는 이미지, 폰트 등 정적 파일을 모아두는 곳이다. 이곳의 파일들은 빌드 시 최적화 과정을 거치는 것이다. 개발 편의성을 위한 폴더 구조 설계src 폴더 내부에 다음과 같은 폴더들을 추가하여 구조를 설계하면 코드 관리가 용이해진다.components 버튼, 인풋 창, 모달처럼 여러 페이지에서 재사용될 UI.. 2025. 9. 11. [React] vite project 생성 및 구조 가이드 현재 SI 프로젝트 대비 react 공부를 계속계속 하고 있다. 그리고 곧 신입들이 들어온다는 얘기를 들었다. 그래서 그 친구들을 위해 그리고 나를 위해 react 관련 정보들을 정리해둘려고 한다. vite(비트) 프로젝트 기반에서 리액트 애플리케이션을 만들거라 vite에 대해서부터 알아보자. Vite(비트)프론트엔드 빌드 도구빠른 개발 서버미리 번들링 없이 모듈을 바로 로드하여 서버를 즉시 시작함.번들링 : 여러 코드와 프로그램을 묶어 사용자에게 웹 애플리케이션을 제공하는 과정. 최종적으로 번들링된 파일을 브라우저에서 실행하여 웹 애플리케이션을 실행개발 중 번들링 없이 모듈을 직접 로드빠른 빌드 속도환경 변수 지원.env 파일을 통해 환경 변수를 쉽게 관리할 수 있음간단히 말해 vite는 리액트의 빌.. 2025. 9. 10. [React] Hook이 대체 뭐야? (useState, useEffect) 리액트 훅(Hook)이란?저번에 컴포넌트에 대해서 간단하게 설명했을 때 안한 얘기가 하나 있다.컴포넌트는 크게 두 가지 유형으로 나뉜다.클래스형 컴포넌트와 함수형 컴포넌트이다.클래스형 컴포넌트는 예전부터 사용하던 방식으로, 이름처럼 ‘클래스’ 라는 문법으로 만든다. 기능은 많지만 코드가 조금 길고 복잡하게 느껴질 수 있다.함수형 컴포넌트는 비교적 최근에 등장해 대세가 된 방식이다. ‘함수’ 형태로 훨씬 간결하고 직관적으로 컴포넌트를 만들 수 있다.이 함수 컴포넌트는 마치 ‘주문을 받으면 특정 모양의 레고 블록(UI)을 만들어서 내놓는 간단한 기계’ 와 같다.그런데 이 간단한 기계에는 몇 가지 치명적인 단점이 있다.기억력이 없다. (Stateless) : 버튼을 몇 번 눌렀는지, 사용자가 입력창에 무엇을 .. 2025. 6. 30. [React] 리액트 렌더링에 대해서 리액트의 렌더링이란?지난 컴포넌트에 대해서 설명할 때, 컴포넌트가 마치 레고 블록과 같다고 설명했다.그렇다면 렌더링은 이 레고 블록을 조립해서 눈에 보이는 ‘집’을 만드는 과정이라고 할 수 있다.컴퓨터가 리액트 컴포넌트라는 코드를 읽어서 우리가 실제로 보는 웹사이트 화면으로 그려주는 작업을 바로 ‘렌더링’이라고 부른다.리액트 렌더링 과정리액트로 만든 웹사이트를 하나의 거대한 ‘레고 전시장’ 이라고 상상해보자. 우리가 웹사이트 주소를 딱 치고 들어가는 순간은, 이 전시장에 처음 입장하는 것과 같다.index.html - “텅 비어있는 전시장”모든 웹사이트는 사실 HTML 이라는 뼈대로 이루어져 있다. 리액트 프로젝트 폴더를 열어보면 public 폴더 안에 index.html 이라는 파일이 있을거다.이 in.. 2025. 6. 27. [React] 리액트에서 컴포넌트(Component)란? 컴포넌트(Component)란?리액트 에서 컴포넌트를 말하자면 ‘레고 블럭’과 같다고 할 수 있다.우리가 레고로 어떠한 건물이나 오브젝트를 만들 때, 다양한 모양과 크기의 블록을 가지고 조립을 한다.리액트로 웹사이트나 애플리케이션을 만드는 것도 이와 비슷하다.여기서 각각의 레고 블록 역할을 하는 것이 바로 컴포넌트이다.좀 더 자세히 알아보자컴포넌트는 UI를 구성하는 독립적인 최소 단위이다.네이버 홈페이지를 생각해보자검색창 (SearchBar 컴포넌트)뉴스 헤드라인 (NewsHeadline 컴포넌트)쇼핑 추천 상품 (ShoppingItem 컴포넌트)로그인 폼 (LoginForm 컴포넌트)이 모든 것이 각각 하나의 컴포넌트가 될 수 있다.이렇게 쪼개진 컴포넌트들을 합쳐져서 하나의 페이지가 완성되는거다.컴포넌.. 2025. 6. 27. [React] React-Quill Editor 적용하기 현재 리액트 공부를 하고 있다. 다음 프로젝트에서 아마 front 단을 리액트로 할 예정이다. 우선 처음에 할 때는 역시 CRUD 부터 하는 거다. 모든 웹에선 CRUD가 기본이다. 그래서 게시판 글 작성부터 할 예정이다. 사실 이전에 React 공부를 하다 말았었다. 그 때는 웹 공부 한창할 때라 이것저것 건들려봤다. (최근까지 바빠서 공부를 못했지만,,,) 이미 세팅은 다 되어있다. back단은 spring boot로 되어 있고, DB는 Maria DB를 쓰고 있다. JPA 대신 마이바티스를 쓰고 있다. JPA는 아직까지 어색하다. 아무튼 게시판 글 작성 목적으로 Editor를 찾다가 React-Quill 이란 걸 알게 됐다. 예전에 할 때 Tosat-UI에서 나온 Editor를 사용했다. 근.. 2025. 5. 2. 이전 1 2 다음
