inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Slack 클론 코딩[실시간 채팅 with React]

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

1890

KGinS

작성한 질문수 3

0

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

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

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

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

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

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

성능 리렌더링 typescript react Socket.io babel 웹팩 클론코딩

답변 1

1

제로초(조현영)

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

0

KGinS

감사합니다 :)

기본 셋팅과 관련하여

0

100

1

초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법

0

103

2

focus 시에만 화면 업데이트 되는 이유 + 해결방법

0

159

2

useEffect 개수 관리

0

115

2

라이브러리 서치 방법

0

107

2

함수 정의 패턴

0

78

1

npm run dev 에러

0

153

3

npx webpack 후 에러

0

181

2

'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)

0

146

2

사용자 가입시 에러발생 (TypeError: Cannot read properties of null (reading 'addMembers')

1

181

2

초기세팅중 packge.json 에러떠요

0

158

2

CORS - Access-Control-Allow-Origin 누락 문제

0

434

3

로그인 페이지 무한 새로고침 현상

0

600

2

Module not found: Error: Can't resolve './App' 에러

0

962

1

배포 방법

0

301

2

npm run dev 시 빌드가 매우 느려졌습니다

0

1000

2

alias 경로 설정 오류

0

457

2

fetcher 함수의 data 값이 두번 찍히는 이유

0

279

1

제네릭 질문

0

220

2

ts-node 대신 tsx 사용여부

0

375

1

배포 관련 질문

0

249

1

[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.

0

389

2

[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.

0

339

1

users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.

0

248

2