개발/React10 [React] useDeferredValue 이전 관련 글 2023.03.23 - [개발/React] - [React] lodash를 활용한 debounce 2023.03.26 - [개발/React] - [React] useTransition 알아보기 useDeferredValue useDeferredValue도 useTransition과 마찬가지로 React 18에 들어와서 새로 도입된 HOOK이다. 사용방법 const deferredValue = useDeferredValue(value); useDeferredValue에 값이 들어오게 되면, 렌더링 우선순위에 따라 값을 반환하게 된다. useTransition은 setState와 같은 함수의 우선순위라면, useDeferredValue는 값의 우선순위에 따라 값을 지연하게 된다. 이는 api호.. 2023. 3. 28. 00:22 [React] useTransition 알아보기 useTreansition hook api useTransition은 React 18에 들어오면서 새로 도입된 함수이다. 바로 공식문서의 예제를 보면서 정리하겠다. function App() { const [isPending, startTransition] = useTransition(); const [count, setCount] = useState(0); function handleClick() { startTransition(() => { setCount(c => c + 1); }); } return ( {isPending && } {count} ); } useTreansition 함수의 반환값은 isPending , startTransition 으로 설정된다. isPending은 현재 작업이 지연.. 2023. 3. 26. 23:18 [React] lodash를 활용한 debounce lodash를 활용한 debounce 이전 포스팅에서 디바운스와 쓰로틀링에 대해 정리하였다. Javascript를 사용할 때 아주 유용한 라이브러리 lodash란 라이브러리가 있다 이 라이브러리를 이용하면, debounce 이외에도 자바스크립트에서 지원하지 않는 편한 함수들을 지원해 준다. 공식 사이트는 아래와 같다. https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences &.. 2023. 3. 23. 00:21 [React] useEffect의 cleanup, useLayoutEffect 최근 React 프로젝트를 진행하면서, useEffect에 대해 좀 더 유심히 알게 되었다. React 라이프 사이클 또는 useEffect의 클린업에대해 간단히 정리해보려 한다. useEffect를 자주 쓰게 되면 렌더링이 무분별하게 발생하고, 메모리 누수가 대량으로 일어나게 할 수 있다. 이를 방지하기 위해서는 useEffect 후 클린업 함수를 사용해 주어야 한다. useEffect(() => { const subscription = props.source.subscribe();//subscribe 이벤트 발생 return () => { // Clean up the subscription subscription.unsubscribe(); //subscribe 이벤트 해제 }; }); React 공식.. 2023. 3. 21. 00:37 [React] 디바운스(Debounce), 쓰로틀(Throttle) 디바운스(Debounce)와 쓰로틀(Throttle) - 디바운스와 쓰로틀 React상의 onChange 이벤트로 api의 요청을 계속해서 보낼 시, 서버의 과부하를 막기위해 사용한다. 쉽게 말하면 api 요청을 과도하게 할 경우 서버에 부담이 가기때문에, 이를 막기위한 하나의 방식이라고 생각하면 된다. 디바운스(Debounce) 이벤트가 일어나기 시작할때 여러번 호출이 발생한다면, 제일 마지막이나 제일 처음에 호출된 것만 실행하게 하는 것 디바운스 예제 function Input() { const [text, setText] = useState(''); const [tmpText, setTmpText] = useState(query); useEffect(() => { const debounce = se.. 2023. 3. 19. 21:38 Next + RTK + Typescript 개발 환경 설정하기 Next + RTK + Typescript 개발 환경 설정 Next.js 와 RTK를 연동하여 사이드 프로젝트를 하려 하는데 레퍼런스들이 좀 각자 개별로 달라서 내가 따로 정리해보려고 포스팅을 적는다. Next.js , Redux Next.js는 서버에서 서버사이드 렌더링을 하기 위한 라이브러리이기 때문에 서버에서 돌아가지만, Redux는 클라이언트(브라우저) 전역 상태 라이브러리기 때문에 브라우저 상에서 동작하게 된다. 원래 리액트 앱에서 리덕스를 사용하게 되면 단 하나의 리덕스 스토어만 존재하게 되지만, Next를 사용하게 되면 리덕스 스토어가 여러개가 생기는 문제가 생긴다. 그래서 Next와 redux를 같이 사용하려면 next-redux-wrapper 라이브러리를 사용해야한다. https://gi.. 2022. 11. 18. 01:45 이전 1 2 다음 728x90
