useState
-
useState와 useEffect를 넘어선 고급 React HooksReact 2024. 1. 29. 14:11
React의 Hooks 도입은 함수형 컴포넌트 개발에 혁신을 가져왔으며, 상태 관리와 부수 효과(side effects)를 다루는 더 강력하고 유연한 방법을 제공합니다. useState와 useEffect는 널리 사용되고 있지만, React 애플리케이션을 크게 향상할 수 있는 다양한 고급 hooks가 더 있습니다. 1. useCallback useCallback은 메모이제이션된(memoized) 콜백 함수를 반환하는 훅입니다. 특히 복잡한 로직이 있는 컴포넌트나 함수를 props로 받는 컴포넌트에서 불필요한 렌더링을 방지하는 데 매우 유용합니다. 큰 리스트나 테이블의 성능 최적화. 자식 컴포넌트의 불필요한 렌더링 방지. const memoizedCallback = useCallback( () => { /..
-
Lazy initialization로 useState 최적화하기Tip 2022. 6. 27. 17:43
react로 프로젝트를 만들 때면 생각보다 초기값을 넣어주고 해당 값이 앱을 재 실행하기 전까지 변하지 않는 경우가 많다. 평소라면 이런 초기값 할당은 큰 문제가 없다. 하지만 초기값으로 복잡한 값을 할당하거나 한 경우 reRender를 실행할 때마다 해당 함수가 계속 재 실행되게 되어 불필요한 낭비가 발생한다. 이를 해결하는 것은 무척 간단하다. const getLocalData = () => window.localStorage('cacheCount'); // 평소 [count, setCount] = useState(getLocalData()); // Lazy Initialization [count, setCount] useState(()=> getLocalData()); 위와 같이 useState의 ..