전체 글153 [DIL] useDeferredValue useDeferredValue는 UI 일부의 업데이트를 지연시킬 수 있는 리액트 훅이다.const deferredValue = useDeferredValue(value) 참조 useDeferredValue(value)컴포넌트의 최상위 레벨에서 useDeferredValue를 호출하여 지연된 버전의 값을 가져온다.import { useState, useDeferredValue } from 'react';function SearchPage() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); // ...} 매개변수 value: 지연시키려는 값이다. 어떤 타입이든 가능하다. 반환값 초기 렌더링 중.. 2024. 6. 24. [DIL] useTransition const [isPending, startTransition] = useTransition() useTransition은 UI 를 차단하지 않고 state를 업데이트할 수 있는 React 훅이다. 참조 컴포넌트의 최상위 레벨에서 useTransition을 호출하여 일부 state 업데이트를 트랜지션으로 표시한다.import { useTransition } from 'react';function TabContainer() { const [isPending, startTransition] = useTransition(); // ...} 매개변수 useTransition은 매개변수를 받지 않는다.반환값useTransition은 정확히 두 개의 항목이 있는 배열을 반환한다.보류 중인 트랜지션이 있는지 여부를.. 2024. 6. 24. [TIL] TanStack Query란 TanStack Query는 웹 개발에서 데이터를 쉽게 가져오고 서버 상태(서버와의 통신을 통해 가져오는 데이터)를 관리할 수 있게 도와주는 도구(라이브러리)이다. 이전에는 React Query라고 불렸는데 리액트 뿐만 아니라 다른 SPA 프레임워크에서도 사용 가능하기 때문에 이름이 바뀌었다고 한다.이 도구를 사용하면 웹사이트가 서버에서 데이터를 가져오거나 업데이트할 때 생기는 복잡한 문제를 더 쉽게 해결할 수 있다. 예를 들어, 블로그 글 목록이나 상품 목록을 서버에서 가져오는 작업을 쉽게 해준다.왜 TanStack Query가 필요할까?데이터를 자동으로 관리: TanStack Query는 데이터를 서버에서 가져오거나 업데이트하는 일을 자동으로 관리해준다. 만약 데이터를 가져오다가 에러가 나면, 그걸 .. 2024. 6. 21. [TIL] useQuery 사용중 데이터가 undefined로 뜰때 supabase에 있는 데이터를 가져와서 구현하던 중처음에는 잘 구현되었으나 로직을 변경하지 않았는데도 새로고침했더니 데이터가 undefined으로 뜨면서 오류가 났다.// 오류 코드// 생략function MyPage() {// supabase에서 데이터 가져오기 const selectMapData = async () => { const { data: placeData } = await supabase.from('places').select('*'); return placeData; };// useQuery로 관리하기 const { data: mapData, isPending } = useQuery({ queryKey: ['mapData'], queryFn: selectMap.. 2024. 6. 20. [TIL] supabase로 로그인과 회원가입 연동하기 supabase 링크 https://supabase.com/ Supabase | The Open Source Firebase AlternativeBuild production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.comsupabase 공식문서 링크 https://supabase.com/docs Supabase Docs supabase.com 1. supabase 에서 New project 만들기 비밀번호는 Generate a password로 자동생성한 후 Copy해서 .. 2024. 6. 19. [발표] useMemo와 useCallback useMemo란?컴퓨터나 스마트폰에서 프로그램이 작업을 더 빠르고 효율적으로 할 수 있게 돕는 도구이다.반복해서 계산해야 하는 값이 있다면 미리 저장해두었다가 다음에 바로 꺼내어 쓸 수 있다. useMemo의 사용법const cachedValue = useMemo(calculateValue, dependencies)calculateValue : 캐시 저장할 함수 dependencies : calculateValue 코드 내에 있는 모든 반응형 값(props, state, 모든 변수와 함수 포함 가능)메모이제이션( memoization ): 'useMemo'는 함수의 반환값을 기억하고, 의존성 배월의 값이 변경될 때만 함수가 다시 실행된다. 그렇지 않으면 이전에 계산된 값을 반환한다. * 메모이제이션.. 2024. 6. 18. [DIL] useCallback useCallback(fn, dependencies)최상위 컴포넌트에서 useCallback을 호출하여 리렌더링 사이에 함수 정의를 캐시한다.import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); 매개변수 fn: 캐시하려는 함수 값이다. 어떤 인자도 받을 수 있고 어떤 값이라도 .. 2024. 6. 18. [DIL] useMemo useMemo(calculateValue, dependencies) useMemo는 리렌더링 사이의 계산 결과를 캐시할 수 있는 리액트 훅이다.컴포넌트 최상단에서 useMemo를 호출하여 리렌더링 사이의 계산 결과를 캐시한다.*캐시 : 자주 사용하는 데이터를 임시로 저장해 두었다가, 필요할 때 바로 꺼내 쓰는 저장소.import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ...} 매개변수calculateValue : 캐시하려는 값을 계산하는 함수이다. 이 함수는 순수함수여야 하며, .. 2024. 6. 17. [TIL] 옵셔널 체이닝(Optional Chaining)이란 프로그래밍 언어에서 특정 값이나 객체가 존재하는지 확인하고, 존재할 때만 그 값에 접근하는 방법. api로 회원 정보를 가져와서 MyProfile에 가져온 닉네임을 띄우려 했으나해당 페이지를 새로고침하면 데이터가 다 날라가버리는 현상이 일어났다. // 문제 로직//생략function MyProfile() { const { userData, setUserData } = useContext(ListContext); const [nickname, setNickname] = useState(''); return ( 프로필 변경 setNickname(e.target.value)}/> 닉네임 변경 )}//생략 .. 2024. 6. 14. [DIL] useLayoutEffect * useLayoutEffect는 성능을 저하시킬 수 있다. 가급적이면 useEffect를 사용하는 것이 좋다. useLayoutEffect는 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect이다.useLayoutEffect(setup, dependencies?) useLayoutEffect(setup, dependencies?)브라우저가 화면을 다시 그리기 전에 useLayoutEffect를 호출하여 레이아웃을 측정한다.import { useState, useRef, useLayoutEffect } from 'react';function Tooltip() { const ref = useRef(null); const [tooltipHeight, setTooltipHeight] = .. 2024. 6. 11. [TIL] React 'react-router-dom'으로 페이지 연결하기 메인페이지에서 로그인 버튼을 누르면 로그인 할 수 있는 페이지로 넘어가도록 연결해보자 ! 1. 먼저 터미널에서 `react-router-dom` 설치한다.npm install react-router-dom또는yarn add react-router-dom // Home.jsximport { useContext, useEffect, useState } from "react";// 생략import { Link } from "react-router-dom";import Header from "../loginpages/Header.jsx";function Home({ contents, setContents }) { //생략 return ( // 생략 .. 2024. 6. 11. [발표] useEffect와 useLayoutEffect useEffect는 컴포넌트를 외부 시스템과 동기화할 수 있는 리액트의 훅으로 구조는 다음과 같다.useEffect(setup, dependencies?) setup : 흔히 화살표함수로 할당하는 셋업함수이다. dependencies : 흔히 [] 로 useEffect 훅이 다시 실행될지 여부를 결정한다. 1. 기본사용 : 아래 예제에서 useEffect는 count가 변경될 때마다 실행된다. 의존성 배열 안에 count 확인.import React, { useState, useEffect } from 'react';function MyComponent() { const [count, setCount] = useState(0); useEffect(() => { console.log('coun.. 2024. 6. 4. 이전 1 ··· 7 8 9 10 11 12 13 다음
