공부/React & React Native14 [React] Windowing으로 렌더링 성능 최적화하기 최근 렌더링 이슈를 경험했었다. 수 천개쯤 되는 다수의 데이터를 한 번에 렌더링했기에 발생하는 이슈였다. 이 이슈를 통해 알게 된 Windowing 기법과, 이를 구현할 수 있게 해주는 라이브러리에 대해 기록한다.Windowing 기법이란? React 공식 페이지에서도 소개하고 있는 Windowing 기법이란, 간단히 말해 전체 목록의 일부만 렌더링하는 기법이다. 수백, 혹은 수천개의 항목을 한 번에 렌더링 하는 건 큰 부하를 일으킬 뿐더러, 페이지에 보이지 않는 요소까지 렌더링하는 경우가 많기 때문에 비효율적이다. 따라서 Windowing 기법은 화면에 보이지 않는 요소들을 렌더링에서 제외하고 일부만 렌더링함으로써 성능을 최적화할 수 있게 해준다. 사실 이 개념은 아주 어렴풋하게 알고 있었는데.. 2024. 6. 2. React-Query 찍어먹기 최근 React-Query를 쓰는 회사들이 꽤 많음을 짐작할 수 있었다. 마침 종종 참고하던 강의에 React-Query 내용이 있어, 강의를 듣고 간단히 써본 것을 정리한다. 강의는 Udemy의 React - The Complete Guide 2024를 시청했다. React-Query(Tanstack-query) : HTTP 요청을 보내고, 백엔드 데이터와 프론트엔드의 UI를 동기화하게 해주는 서버 상태 관리 라이브러리. 서버에 요청을 보내는 것은 굳이 이 라이브러리를 쓰지 않아도 가능하지만, React-query를 사용하면 간편함과 다양한 이점을 얻을 수 있음. ex) 코드 길이 감소, 데이터 변경 시 자동으로 새 데이터 fetch, 데이터 캐싱 등... React-Query에서 직접 HTTP 요청을.. 2024. 3. 4. React Testing에 대하여 Udemy의 React - The Complete Guide 강의의 Section 27: Testing React Apps(Unit Tests)를 듣고 공부한 내용을 간략히 정리. Automating Testing (테스트 자동화) 테스트는 왜 해야할까? 개발자가 개발하는 도중, 수동으로 작동 등을 확인하는 것은 '수동 테스트(Manual Test)'이다. 다만, 테스트를 수작업으로 진행할 경우 가능한 모든 테스트 케이스(시나리오)를 테스트할 수 없기 때문에 예상치 못한 에러가 발생할 수 있다. 이에 반해, 자동화된 테스트는 모든 시나리오를 자동적으로 테스트할 수 있다. 개발자가 하나하나 손으로 하는 것보다 시간도 절약할 수 있다. 따라서 수동 테스트만 진행하는 것 보다, 자동 테스트를 같이 병행함으로.. 2023. 11. 22. Notifee 정리 React Native에서 로컬 알림을 보낼 수 있게 해주는 패키지는 대표적으로 react-native-notifications, react-native-push-notifications, notifee 등이 있다. 이중 널리 쓰이는 것으로는 react-native-push-notifications 이 있는데, 깃허브를 살펴보니 현재 패키지가 활발히 관리되고 있는 상태가 아니기 때문에 다른 패키지 사용을 고려해보라는 내용이 적혀있었다. 대체안으로써 추천된 것 중 하나가 Notifee인데, 과거엔 유료였으나 얼마 전부터 완전 무료로 풀린 것으로 보인다. 해서 기본적인 사용법을 기록해둔다. 설치 npm install --save @notifee/react-native yarn add @notifee/reac.. 2023. 5. 20. [0814 ~ 0815] React-Native 강의 정리 Section 15 : In-App Authentication Async Storage : React-Native에서 로컬에 데이터를 저장하기 위한 모듈. 지금은 더 이상 사용되지 않음. → 이미지나 비디오 등의 미디어를 저장하기 보다는 더 작은, JSON 오브젝트 등을 저장하는 데에 좋음. - setItem(key, value) : 기기에 데이터를 저장함. - getItem(key) : 저장된 데이터를 가져옴. - removeItem(key) : 저장된 데이터를 삭제함. Navigation → 여태까지 스크린 전환에 사용해온 방법은 navigation prop을 받아서 navigate를 사용하는 것이었음. ⇒ navigation prop에 접근할 수 없는 곳에서 navigation 기능을 수행하기 어려.. 2021. 8. 16. [0812~0813] React-Native 강의 정리 Section 13 : Data API Sync useEffect : 컴포넌트의 렌더링이 완료된 다음 원하는 작업을 수행시키는 기능. (참고 : https://ko.reactjs.org/docs/hooks-reference.html#useeffect) useEffect(() => {}, []) - 첫 번째 매개변수 : 조건을 만족할 때마다 실행됨. - 두 번째 매개변수 : 함수가 호출되는 조건을 설정. → 배열 안에 전달한 값이 변경될 때만 useEffect가 실행됨. 두 번째 매개변수에 아무것도 전달하지 않으면 렌더링 될 때마다 첫 번째 매개변수에 전달된 함수가 호출됨. 두 번째 매개변수에 '빈 배열'을 전달하면 useEffect는 단 한 번만 실행됨. navigation.addListener() : .. 2021. 8. 14. 이전 1 2 3 다음
