반응형

react 7

React에서 여러 상태 한 번에 관리하는 hook(훅) 만들기

상태 관리는 React 애플리케이션에서 중요한 부분입니다. 하지만 때로는 useState를 과도하게 사용하여 코드의 복잡성을 불필요하게 증가시키는 경우가 있습니다. 예를 들어, 다음과 같은 코드를 생각해 볼 수 있습니다: import React, { useState } from 'react'; const OverusedStateComponent = () => { // 각각의 상태를 별도의 useState로 관리 const [isVisible, setIsVisible] = useState(true); const [isDisabled, setIsDisabled] = useState(false); const [isLoading, setIsLoading] = useState(false); const [isErr..

IT/React 2024.01.25

React의 useCallback 예제

React에서 useCallback은 함수를 메모리에 저장하여 성능을 최적화하는데 유용하다. 부모 컴포넌트가 여러 항목을 관리하고, 각 항목을 업데이트하는 기능을 자식 컴포넌트에게 전달하는 상황이다. useCallback을 사용하면 부모 컴포넌트에서 자식 컴포넌트로 전달되는 함수가 불필요하게 재생성되는 것을 방지할 수 있다. import React, { useState, useCallback } from 'react'; function Item({ item, onUpdate }) { return ( {item.content} onUpdate(item.id, `업데이트된 내용: ${item.content}`)}>업데이트 ); } function ItemList() { const [items, setItem..

IT/React 2023.11.29
반응형