• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

SWR 사용하기 (쿠키 공유하기)

21.03.14 01:23 작성 조회수 128

0

안녕하세요~ swr 관련 내용은 아니고 해당 파트에서 질문에 답변해주시는 분야에서 문득 궁금한 점이 생겨 질문 남깁니다.

SWR 사용하기 (쿠키 공유하기) 파트에서 영상 15분 가량에서 useState와 let 변수를 사용하는 것과의 차이점을 설명하시던 부분에서 후자의 경우는 onChange... 이벤트로 글자 하나 하나 입력할 때 마다 리렌더링 되어 제대로 값을 사용할 수 없다고 말씀해주셨는데,

말씀처럼 'abcde' 라는 단어를 Input창에 입력할 때 총 5번의 렌더링이 일어나는 것으로 이해했습니다. 보통 이와 같이 Input 태그에 이벤트 핸들러를 달아줄 때 글자 하나 하나 입력될 때마다 리렌더링 되는 이슈가 성능적으로 큰 영향을 미치나요?

리액트에서 리렌더링 성능과 관련해서 React.memo / useMemo / useCallback 을 주로 사용해서 개선하는 것으로 알고 있는데, 크게 성능적으로 영향을 미치지 않는다면 굳이 사용하지 않는다고도 들은 것 같습니다.

개인적으로는 위 사례에서처럼 글자 하나 하나 입력 때마다 다시 그려지는 것은 필요 이상으로 리렌더링 된다고 생각이 드는데, 이게 보통 성능적으로 큰 문제가 안 되는 편인지와 만약 성능적으로 문제가 된다라고 판단되면  쓰로틀링 같은 기법을 이벤트 핸들러에 추가로 적용하여 이를 방지하는지 궁금합니다.

항상 좋은 수업 감사합니다.

답변 1

답변을 작성해보세요.

1

대부분은 성능적으로 문제가 안 됩니다. 다만, 한 번 문제가 생기기 시작하면 기존에 최적화하지 않았던 코드들 때문에 어디서 리렌더링이 일어나는지 분석하기 매우 어려워집니다. 그래서 틈틈이 최적화를 해두는 것을 추천합니다.

KGinS님의 프로필

KGinS

질문자

2021.03.14

감사합니다 :)