Web/React7 [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. 이전 1 2 다음
