안녕하세요. 리렌더링 이해하기 회차에서 리렌더링이 실행되더라도 리액트는 실제로 이전과 달라지는 부분만 돔에 새로 그린다고 하셨는데요. LoginForm.js 코드를 실습하면서 크롬 ReactDevTool의 Highlight updates when components render 옵션을 켜두고 확인하고 있는데, id input에 새로운 값들을 입력하여 리렌더링을 발생시키면 ButtonWrapper 이하 내용들도 함께 하이라이팅이 됩니다. styled-component뿐만이 아니라 useMemo로 리렌더링 최적화를 해도 같은 현상이 보여지는데, Highlight updates when components render 옵션같은 경우 렌더링 되는 부분을 하이라이팅 해주는 기능이라고 알고 있는데요. ButtonWrapper 안에 내용도 리렌더링은 되지만 돔에 다시 그려지진 않는다. 라고 이해하면 되는걸까요? 리렌더링이 일어나도 실제로 돔에 다시 그려지지만 않으면 렌더링 최적화를 구현했다. 라고 할 수 있는건지 궁금합니다. 답변 기다리겠습니다:)
- useCallback은 캐싱이니까 이전 컴포넌트랑 지금 컴포넌트랑 [ ] 부분이 바뀌지 않는 이상 똑같은걸로 친다. - return () 안 부분에서는 실제화면에서 바뀐 부분만 다시 그린다. 라고 하셨는데, 아이디나 비밀번호 Input 부분 onChange 에 의해서 value 에 있는 id 와 password가 바뀌면 return () 안에 Input 의 리렌더링을 방지하나요? 아니면 리렌더링이 되나요? 이 부분이 약간 헷갈립니다!!
안녕하세요~ swr 관련 내용은 아니고 해당 파트에서 질문에 답변해주시는 분야에서 문득 궁금한 점이 생겨 질문 남깁니다. SWR 사용하기 (쿠키 공유하기) 파트에서 영상 15분 가량에서 useState와 let 변수를 사용하는 것과의 차이점을 설명하시던 부분에서 후자의 경우는 onChange... 이벤트로 글자 하나 하나 입력할 때 마다 리렌더링 되어 제대로 값을 사용할 수 없다고 말씀해주셨는데, 말씀처럼 'abcde' 라는 단어를 Input창에 입력할 때 총 5번의 렌더링이 일어나는 것으로 이해했습니다. 보통 이와 같이 Input 태그에 이벤트 핸들러를 달아줄 때 글자 하나 하나 입력될 때마다 리렌더링 되는 이슈가 성능적으로 큰 영향을 미치나요? 리액트에서 리렌더링 성능과 관련해서 React.memo / useMemo / useCallback 을 주로 사용해서 개선하는 것으로 알고 있는데, 크게 성능적으로 영향을 미치지 않는다면 굳이 사용하지 않는다고도 들은 것 같습니다. 개인적으로는 위 사례에서처럼 글자 하나 하나 입력 때마다 다시 그려지는 것은 필요 이상으로 리렌더링 된다고 생각이 드는데, 이게 보통 성능적으로 큰 문제가 안 되는 편인지와 만약 성능적으로 문제가 된다라고 판단되면 쓰로틀링 같은 기법을 이벤트 핸들러에 추가로 적용하여 이를 방지하는지 궁금합니다. 항상 좋은 수업 감사합니다.
