Kwangkki

  • 홈
  • 태그
  • 방명록

최적화 1

input의 불필요한 렌더링이 줄이기 State Colocation(상태 공존)과 함께

개인 프로젝트를 진행하다가 이상한 렌더링을 발견했다. input 창에 글자를 입력할 때마다 렌더링이 발생한다. 파란색 프레임이 생성되는 것은 React Develop Tool의 렌더링 표시 기능인데, 렌더링이 될 때마다 표시된다. 보다시피 글자 하나 입력 시 렌더링 된다. 그리고 이메일 input창에 값을 입력했는데 전체 페이지가 렌더링 되는 것을 볼 수 있다. 그냥 봐도 거꾸로 봐도 백덤블링하면서 봐도 비효율적인 것을 알 수 있다. 원래 이런 건가 싶어 리액트로 만든 다른 사이트를 엿보았다. 오늘의집과 직방 또한 이러한 현상이 나타났다. input에 글자를 입력하는데 왜 렌더링이 일어난다는 것에 대한 의문. 잦은 렌더링을 피해야 하는 것은 상식이기 때문에 해결하고 싶음 마음. 두 포인트를 해결하기 위해..

프로그래밍⚡️/React 2023.03.26
이전
1
다음
더보기
프로필사진

무엇이든 배운 것을 정리합니다

  • 전체보기 (79)
    • 프로그래밍⚡️ (68)
      • React (12)
      • node (4)
      • Spring (1)
      • server (7)
      • htmlcss (8)
      • javscript (12)
      • library (2)
      • git (6)
      • unity (7)
      • 기타 등등 (9)
    • 읽은 책📗 (6)
    • 회고🕝 (4)
    • 마케팅 (0)
    • 기타 등등👾 (1)

최근글과 인기글

  • 인기글
  • 최근글

Tag

게임제작, javascript, NPM, api요청취소, 유니티조명, 그냥회고, 모든것의기원, 피그마, 서미싯몸, aiide, HTML, C#, CSS, react, CustomHook, 헤놀로지, VSCode, Nas, 커스텀훅, gameoflife, node, 자작나스, 코딩, conwaygame, 개발공부, 유니티, Unity, 2024회고, 두사람의인터내셔널, 프론트엔드, hof, 독후감, 개인나스, 회고, 나스구축, vue, axioscancel, tailwindcss, 별의후손, 콘웨이인생게임, 자바스크립트, 무라카미하루키, 개발자회고, 매니악, vite에러, axios취소, 리액트, 독서, 오픈소스, rollup에러,

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

  • 인스타

티스토리툴바