React-study/dil25 [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. [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. [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. [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. [DIL] useReducer(1) useReducer(reducer, initialArg, init?)useReducer는 컴포넌트에 reducer를 추가할 수 있는 React입니다.const [state, dispatch] = useReducer(reducer, initialArg, init?)컴포넌트의 최상위 레벨에서 useReducer를 호출하여 reducer를 통해 state를 관리 할 수 있다.import { useReducer } from 'react';function reducer(state, action) { // ...}function MyComponent() { const [state, dispatch] = useReducer(reducer, { age: 42 }); // ... 매개변수( Parameters )r.. 2024. 5. 27. [DIL] useState 사용법 컴포넌트에 state 추가하기 컴포넌트의 최상위 레벨에서 useState를 호출하여 하나 이상의 state 변수를 선언한다.import { useState } from 'react';function MyComponent() { const [age, setAge] = useState(42); const [name, setName] = useState('Taylor'); // ...배열 구조 분해를 사용하여 [something, setSomething]과 같은 state 변수의 이름을 지정하는 것이 관례이다. useState는 state 변수는 처음에 제공한 초기 state이다.그리고 상호작용에 반응하여 다른 값으로 변경할 수 있는 set함수이다.화면의 내용을 업데이트하려면 다음 state로 set 함.. 2024. 5. 20. [DIL] useState(2) setSomething(nextState)과 같은 set 함수state를 다른 값으로 업데이트하고 리렌더링 하려면 useState가 반환하는 set함수를 사용하면 된다.여기에는 다음 state를 직접 전달하거나, 이전 state로부터 계산하여 다음 state를 도출하는 함수를 전달할 수도 있다. const [name, setName] = useState('Edward');function handleClick() { setName('Taylor'); setAge(a => a + 1); // ... 매개변수( Parameters )state가 될 값으로 모든 데이터 타입이 허용되지만, 함수에 대해서는 특별한 동작이 있다.함수를 nextState로 전달하면 업데이터 함수로 취급된다. 이 함수는 순수해야 .. 2024. 5. 17. 이전 1 2 3 다음
