React-study28 [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. [발표] 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. [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. [발표] 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. [DIL] useEffect useEffect는 컴포넌트를 외부 시스템과 동기화할 수 있는 리액트 훅이다.useEffect(setup, dependencies?) 컴포넌트의 최상위 레벨에서 useEffect를 호출하여 Effect를 선언하다. import { useEffect } from 'react';import { createConnection } from './chat.js';function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.conn.. 2024. 6. 4. [발표] useReducer / useContext / useRef useReducer상태 관리를 위해 사용하는 훅 중 하나로 상태가 복잡하거나 상태 변화 로직이 여러가지로 나뉠 때 유용함.상태(state): 컴포넌트의 현재 상태. 어떤 값이나 객체일 수 있음reducer: 상태와 액션을 받아 새로운 상태를 반환하는 함수이다. 액션 : 상태를 어떻게 변경할지를 설명하는 객체이다. 일반적으로 type 속성을 가집니다. 예: { type: 'increment' }useReducer를 사용하기 위해서는 다음 세 가지가 필요하다.초기 상태 (initial state)리듀서 함수 (reducer function)디스패치 함수 (dispatch function) import React, { useReducer } from 'react';// 초기 상태 정의const initial.. 2024. 5. 30. [DIL] useRef useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 훅이다.const ref = useRef(initialValue) 컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언한다. import { useRef } from 'react';function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... 매개변수useRef는 단일 프로퍼티를 가진 객체를 반환한다. current : 처음에는 전달한 initialValue로 설정된다. 나중에 다른 값으로 바꿀 수 있고 ref객체를 JSX노드의 ref속성으로 리액트에 전달하면 리액트는 current 프로퍼티를 설정한다. 다음 렌더링에서 use.. 2024. 5. 30. [DIL] useContext useContext는 컴포넌트에서 context를 읽고 구독할 수 있게 해주는 리액트 훅이다.const value = useContext(SomeContext) 컴포넌트의 최상위 레벨에서 useContext를 호출하여 context를 읽고 구독한다. import { useContext } from 'react';function MyComponent() { const theme = useContext(ThemeContext); // ... 매개변수 context : 이전에 createContext로 생성한 context 이다. context자체는 정보를 보유하지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타낼 뿐이다. 반환값useContext는 호출하는 컴포넌트에 대한 context.. 2024. 5. 29. [DIL] useReducer(2) 초기 state 재생성 방지하기React는 초기 state를 한번 저장하고 다음 렌더링에서 이를 무시한다.function createInitialState(username) { // ...}function TodoList({ username }) { const [state, dispatch] = useReducer(reducer, createInitialState(username)); // ... createInitialState(username)의 결과는 초기 렌더링에만 사용되지만, 이후의 모든 렌더링에서도 여전히 이 함수를 호출한다. 이는 큰 배열을 만들거나 값비싼 계산을 수행하는 경우 낭비가 될 수 있다. 이 문제를 해결하려면 useReducer 세번째 인수에 초기화 함수를 전달할 수 있다... 2024. 5. 28. 이전 1 2 3 다음
