반응형 개발/React52 React 18 - useDeferredValue를 이용한 Concurrent Mode 확인 useDeferredValue를 이용한 Concurrent Mode 확인 react 18의 대표 업데이트중 하나는 concurrent mode이다. concurrent mode는 동시성 렌더링인데 실제로 동시는 아니고, 렌더링 우선순위를 정할 수 있는 기능이다. useTransition과 useDeferredValue가 있는데, useDeferredValue를 이용하여 concurrent mode가 어떤것인지 한번 살펴보자. Concurrent Mode의 도입 React 18에서는 Concurrent Mode를 도입하여 사용자 경험과 성능을 크게 향상시킬 수 있다. Concurrent Mode를 통해 특정 컴포넌트 렌더링이 더 우선순위를 갖고, 사용자와 상호작용하는 동안 더 빠르게 렌더링될 수 있다. 이.. 2023. 8. 3. Functional Update : 상태변경이 비동기적으로 이루어질때 https://betterprogramming.pub/you-dont-know-usestate-until-you-ve-used-functional-updates-5da52117620f You Don’t Know useState Until You’ve Used Functional Updates When we might need useState functional updates and how to use them betterprogramming.pub 위 글을 번역 및 요약했습니다. Functional Update functional update는 다음과 같은 방식이다. const [state,setState] = useState(0) const handleButton = () => { // 왜 setSta.. 2023. 7. 11. React : code spliting을 이용한 성능 최적화 code spliting을 이용한 성능 최적화 React는 일정 규모에 도달하면 파일 크기가 커지고 이는 웹사이트의 초기 로딩 시간에 부정적인 영향을 미친다. 이 문제를 해결하기 위해 React 는 code spliting 이라는 기법을 제공한다. code spliting 기법을 사용하면 필요한 코드만 로딩하는데 도움이 되어 웹사이트의 성능을 향상시킬 수 있다. 동료들과 위 책으로 스터디를 하는데, suspense를 이용하여 code spliting을 통한 성능 최적화를 할 수 있다는 내용을 보았다. 예전에 부트캠프에서 공부할때 공식문서에서 보았던게 생각났다. 어느새 잊고있었군 Code Spliting (코드분할) 페이지에서 필요한 코드만 따로 로드하면 불필요한 코드를 로드하지 않아도 된다. 예를들어서 .. 2023. 5. 18. useHasScroll.tsx : 컴포넌트의 스크롤바 유무를 boolean으로 리턴 useHasScroll.tsx : 컴포넌트의 스크롤바 유무를 boolean으로 리턴 회사에서 dragSlider.tsx를 만들었다. 이전에 라이브러리를 이용해 만든 dragSlider는 카드를 잡아끌었을때, 스크롤이 움직이지 않는 버그가 있었다. 버그를 해결하면서 만든 dargSlider는 카드를 잡아 끌면 스크롤도 같이 움직이도록 되어 있다. 한편, 슬라이더가 슬라이더임을 눈치 채지 못하고, 화면이 짤린것이 아니냐고 물어보는 VOC가 종종 있다는 제보를 받았다. PM분이 '넘기는 것을 암시하는 흐린 그라데이션'을 넣는것을 제안해주셨고 나와 디자이너분 모두 찬성했다. 그래서 다음과 같이 오른쪽 끝에 흐린 그라데이션(이하 cloudyArea)을 넣는 UI가 만들어졌다. 화면이 충분히 넓어서 slider의 .. 2023. 4. 30. 이전 1 2 3 4 5 6 ··· 13 다음 반응형
