반응형 IT/React12 [React] Rerendering issues 상태 변경으로 인한 자식 컴포넌트 rerendering 새로운 프로젝트를 진행 중에 리렌더링 이슈가 너무 많이 발생해서 정리해보고자 한다. 다이어리 꾸미기 페이지에서 하단의 탭을 클릭하면 창이 height를 조절해서 더 많은 스티커 목록을 볼 수 있도록 기획하였다. (true/false로 상태를 관리하여 true 일 경우 max-height: 50vh, false 일 경우 120px로 설정하였다.) // emotion을 적용한 스타일 컴포넌트 const StickerZone = styled.div` position: fixed; max-height: ${(props) => (props.active ? "50vh" : "120px")}; bottom: 0; background-color: ${(props).. 2022. 9. 29. [React-Hook-Form] react hook form validate debounce 적용기 React Hook Form 적용하기 react hook form을 통해 input에 대한 실시간 validation을 간편하게 구현하고 있었다. 회원가입을 구현하는 중, 꼭 필요한 기능으로 이메일, 아이디, 휴대폰 번호에 대한 중복검사가 필요하였고 별도의 버튼 클릭 대신 사용자들이 값을 입력했을 경우 서버로 자동으로 request를 날리도록 구현하였다. 하지만 너무 지나친 request는 서버 성능에 문제를 줄 수 있기 때문에 간단하게 debounce 메서드를 만들었다. // debounce.js function debounce(callback, limit = 1000) { let timeout; return function (...args) { clearTimeout(timeout); timeout .. 2022. 8. 7. [React-Query] react-query를 활용한 무한 스크롤 구현 에러 처리 TheMint 개발 에러 useObserver 무한 스크롤 에러 react-query의 useInfiniteQuery와 IntersectionOberser API를 사용하여 무한 스크롤을 구현하고자 하였다. useInfiniteQuery를 사용하여 데이터 캐싱을 최적화하고, 컴포넌트를 변경 후에도 기존의 데이터에 대한 상태를 관리하여 클라이언트가 새로 데이터를 요청하지 않도록 하기 위함이다. 무한 스크롤을 구현하기 위해 IntersectionObserver API를 활용한 useObserver hooks을 만들었다. import React, { useEffect } from 'react'; function useObserver({ target, onIntersect, root = null, rootMar.. 2022. 8. 5. [React] React 18 - Automatic Batching 새로운 React, React 18 2021년 6월 8일 리액트 팀에서 리액트 18 버전에 관한 사항들을 발표한 이후 7개월의 시간이 흘렀다. Alpha와 Beta 버전을 거쳐 현재 RC 단계로, 한달 내에 온전한 React 18 버전을 사용할 수 있을 것으로 기대된다. (리액트 공식 홈페이지 React 18 안내) 최초 알파 버전에서 소개된 내용과 현재 RC 버전에 소개된 내용에서 큰 차이는 없으며, 대부분의 기능이 확정되었다고 보아도 무방하다. 리액트 18의 개선사항들은 아래와 같다. 즉시 사용 가능한 개선 (out-of-the-box improvements) automatic batching (fewer renders) SSR support for Suspense Fixes for Suspense .. 2022. 1. 12. [React] "리액트를 다루는 기술" 15장-18장 키워드 Context API 환경 설정, 사용자 정보와 같은 전역적으로 필요한 상태를 관리해야할 때 사용 리덕스나 MobX 같은 상태 라이브러리를 사용하여 전역 상태 관리 작업을 더 편하게 처리하기도 하지만, 리액트 v16.3 업데이트 이후 Context API가 많이 개선되어 별도의 라이브러리를 사용하지 않아도 전역 상태 관리 가능 리액트 공식 문서: https://ko.reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces ko.reactjs.org context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터 제공 가능 context API를 사용하기전 주.. 2021. 11. 1. [React] "리액트를 다루는 기술" 13.6 리액트 라우터 부가 기능 (함수형 컴포넌트로 변경해보기) [리액트를 다루는 기술] 13장 "리액트 라우터로 SPA 개발하기" "13.6 리액트 라우터 부가 기능" 학습 중 "13.6.1 history" 관련 학습 내용에서 사용된 class component를 function component로 변경해보았습니다. Class Component Code import React, { Component } from "react"; class HistorySample extends Component { // 뒤로 가기 handleGoBack = () => { this.props.history.goBack(); }; // 홈으로 이동 handleGoHome = () => { this.props.history.push("/"); }; componentDidMount() { .. 2021. 9. 19. [React] "리액트를 다루는 기술" 9장 컴포넌트 스타일링 / React Sass-loader 설정 커스터마이징 오류 이슈 '리액트를 다루는 기술' 9장 컴포넌트 스타일링 학습 중 utils.scss 파일을 불러올 때 현재 생성된 utils.scss 파일의 위치와 상관없이 불러오고, 매번 불러오는 상황이 번거로울 때 utils.scss 파일을 자동으로 불러와, @import 를 사용하지 않아도 정상적으로 작동하기 위한 방법을 학습하였습니다. yarn eject를 통해 생성된 config 폴더 내 존재하는 webpack.config.js에 커스터마이징 된 sass-loader를 webpack.config.js에 넣어주려고 최종적으로 '리액트를 다루는 기술'에 적힌 코드를 입력하니, { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders({ importLoaders:.. 2021. 9. 17. [React] useCallback '리액트를 다루는 기술'에 나오는 useCallback 개념을 정리하고, 이해가 가지 않아 찾아 본 내용들을 정리해보겠습니다. useCallback useMemo와 상당히 비슷한 함수 주로 렌더링 성능을 최적화해야 하는 상황에서 사용 ➡️ useCallback 사용 시 만들어 놨던 함수의 재사용이 가능 useCallback(fn, deps)은 useMemo(() => fn, deps)와 동일 useCallback 함수를 사용하지 않으면, 컴포넌트 내에 선언된 함수들은 컴포넌트가 리렌더링될 때마다 새로 만들어진 함수를 사용하게 됩니다. ▶️ 대부분의 경우에는 문제가 되지 않으나, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화해 주는 것이 좋습니다. useCa.. 2021. 9. 17. [React] 리액트를 다루는 기술 1-5장 키워드 정리 키워드: React, JSX, 컴포넌트, 이벤트, ref 1장 리액트 시작 React 1. React란 무엇인가? React는 페이스북에서 제공하는 자바스크립트 UI 라이브러리 ➡️ 즉, React 프론트엔드 라이브러리의 일종 Vue, Angular 등은 프레임워크인 데 반해 React는 라이브러리 ➡️ 웹을 만드는 데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않는다. 그런만큼 가볍고, 선택의 폭이 넓다. React는 컴포넌트 기반 ➡️ 컴포넌트에 데이터를 흘려보내면 설계된 대로 UI가 조립되어 사용자에게 보여진다. 자바스크립트 기반 프레임워크 (출처: 리액트를 다루는 기술) 1.1 React를 사용하는 이유 프로젝트 규모가 크고 다양한 UI와 상호작용이 필요하다면 DOM 요소 하나하나를 직접 관리하.. 2021. 9. 17. 이전 1 2 다음 728x90 반응형
