Tanstack Query 의 캐싱에 대하여

Tanstack Query 는 캐싱을 제공한다. 공식 문서에 useQuery 훅을 사용하여 데이터 캐싱과 관리 방법을 간단한 예시로 설명하고 있어서 정리해 보았다. 예시 useQuery 훅을 통해 ['todos'] 쿼리 키를 사용하는 쿼리를 실행fetchTodos 함수로 네트워크 요청을 통한 데이터 받기gcTime 은 5분, staleTime 는 0초로 설정위의 조건대로 기본 상황을 설정하였으며, 해당 조건을 토대로 캐싱이 어떻게 이루어지고 데이터가 삭제되는 과정을 알아보자. 단계별 설명1. 처음 실행useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 을 처음 호출하면 아직 캐시된 데이터가 없다. 그러므로 로딩 상태를 보여주고 네트워크로 요청을 보낸다. 이때..

• format_list_bulleted React
• · 2024. 11. 7.
• textsms

[React] Props Children

자식 컴포넌트에 정보를 전달하는 방법은 props 로 전달하는 것이다. 그중 children 이 있는데 해당 내용을 정리해 보려 한다! children children 은 부모 컴포넌트의 자식으로 감싸진 요소를 props 를 통해 자식 컴포넌트로 전달해 주는 역할을 한다. 이는 부모가 자식의 내부 구조를 유연하게 정의할 수 있어서 재사용성과 컴포넌트의 유용성이 높아진다. function Child(props) { console.log("props :>> ", props); return ;}function App() { return 안녕하세요;}export default App;App 컴포넌트는 자식 컴포넌트 Child 를 가지고 있다. 자식으로 데이터를 보낼 때 와 같은 방식 말고도 다른 방법이 ..

• format_list_bulleted React
• · 2024. 8. 31.
• textsms

[React] 리액트에서 불변성

리액트에서 불변성을 지키는 것이 중요하다는 말을 많이 들어봤다. 리액트에서 불변성에 대해 이해하기 위해서 불변성이 무엇인가불변성이 지키는 것은 무엇인가리액트에서 불변성이 중요한 이유위와 같은 내용을 알아보자. 불변성이란?불변성(immutability) 이란 네이버 국어사전에 의하면 '변하지 아니하는 성질' 을 의미한다.그러면 프로그래밍 세계에서 불변성이란 데이터가 한 번 생성되면 변경되지 않는 성질을 말한다. 불변성을 지킨다의 의미자바스크립트에서 객체와 배열은 참조 타입이다. 따라서 직접적으로 값을 수정할 경우 원본 데이터를 변경하는 현상이 일어난다. 원본 데이터를 변경시켜서 불변성을 지키지 않은 예시를 먼저 알아보자.const fruits = ["apple", "banana"];const newFrui..

• format_list_bulleted React
• · 2024. 8. 29.
• textsms

React 에서 Sweetalert2 사용

브라우저에서 alert 를 호출하면 뜨는 알림창은 브라우저 자체에서 제공하는 기본적인 UI 이다. 그러다 보니 따로 손봐주지 않으면 굉장히 밋밋하고 못생긴(?) 알림창이 나온다. 나는 이쁜 것을 좋아하기 때문에 라이브러리를 사용해서 알림창을 이쁘게 만드는 법을 알아보았다. 사용할 라이브러리는 sweetalert2 이다. 라이브러리 적용 전아래 이미지는 alert 를 호출한 UI 이다. 이 밋밋한 UI 를 라이브러리를 사용해서 변경해 볼 것이다. Sweetalert2 적용 방법1. 설치yarn add sweetalert2 2. importimport Swal from "sweetalert2"; 3. 코드에 적용import "./App.css";import Swal from "sweetalert2";func..

• format_list_bulleted React
• · 2024. 8. 26.
• textsms

[React] CRA, Vite 없이 React 개발 환경 구축하기 (심플 버전)

개요리액트를 CRA(Create React App)나 Vite 같은 도구를 사용해 시작하면 내부적으로 리액트가 어떻게 동작하는지 이해하기 어렵다. 그래서 직접 HTML, React, Babel을 사용해 간단한 리액트 프로젝트를 만들어보았다.  전체 코드 위 스크립트를 통해 React 와 ReactDOM 라이브러리를 로드한다. 이 라이브러리는 컴포넌트 정의와 렌더링에 사용된다. 바벨 추가바벨은 JSX 코드를 브라우저가 이해할 수 있는 일반 자바스크립트로 변환해준다. JSX 와 React.createElementJSX 는 XML 과 유사한 문법으로 작성되며, 내부적으로는 React.createElement 로 변환된다. JSXreturn ( { ..

• format_list_bulleted React
• · 2024. 8. 19.
• textsms

[React] React 에 컴포넌트 별로 CSS 적용하기

라액트를 사용해서 개발하는 것을 처음 경험해 보았다! 프로젝트를 하면서 프로젝트 구조에도 신경 쓰게 되었다. 개발하다 보니 컴포넌트 파일이 많이 생기게 되어서 컴포넌트별로 CSS 도 따로 관리하고 싶어서 CSS 파일을 분리하게 되었다.  파일 분리 후 이슈엇 그런데 문제가 생겼다. 분명 난 A, B 두 개의 컴포넌트가 있고 A.css 와 B.css 를 만들었고 해당하는 컴포넌트에 맞는 css 를 import 해서 사용을 했는데 A.css 에 추가한 스타일이 B 컴포넌트에도 적용이 되고 있었다. 🤯 띠용그 이유를 찾아보니까 css 파일의 스타일은 기본적으로 전역으로 적용된다고 한다. React 는 css 를 특별히 제한하지 않는다나 뭐라나... 아무튼 이러한 이유로 파일 분리가 의미없나 싶었는데 다른 방..

• format_list_bulleted React
• · 2024. 8. 12.
• textsms