inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

useTransition으로 빠른 반응성으로 유저 경험 향상시키기

useTransition 질문입니다!

414

김도현

작성한 질문수 25

1

강의의 useTransition을 사용한 부분에서 input 태그의 value를 deferedFilter로 설정하고 handleChange 내의 setFilter를 제거해도 문제가 없나요?

아니면 input에서 다루는 value와 Words를 렌더링하기 위한 filter value를 따로 관리해야 하나요?

이렇게 해도 문제가 없는지 궁금합니다!

react

답변 2

0

Rudolf

삭제된 글입니다

0

애프터캠프

image스크롤 살짝 내려보시면 링크가 있습니다!

0

애프터캠프

안녕하세요 도현님!

우선 질문에 대한 답을 하기 이전에 몇가지를 명확히 하자면,

filter: 사용자가 입력하는 즉시 입력값을 나타냅니다.

deferredFilter: 필터링 프로세스에 사용되는 값을 나타냅니다. 이 값에 대한 업데이트는 전환 중에 지연되어 값비싼 계산을 방지합니다.

각각의 state들의 역할은 위와 같습니다.

deferedFilter를 input에다가 넣으셨는데 그렇게 하면 빠르게 asdf를 입력했을 때 얼마나 빨리 입력하느냐에 따라 다르겠지만 저 같은 경우엔 as 가 생략되고 인풋에 df만 입력된 것처럼 렌더링이 되었습니다.

왜 그러냐면 제가 강의에서도 알려드렸지만 startTransition 블럭 내에서 상태 업데이트가 되면 렌더링 우선순위가 낮아지기 때문에 입력한 값의 일부가 소실됩니다 (렌더링 우선순위에 밀려서 생략)

그래서 결론은 스크린샷처럼 하면 문제가 될 수 있을 것 같습니다!

 

 

0

김도현

답변 감사합니다!!

슬슬 따라하기가 힘들어진다.

0

12

1

[문의] 섹션 7 미션 진행 중...

0

13

1

기본 브랜치의 이름이 master에요.

0

15

1

관리자 페이지 질문

0

12

1

plans 생성이 안됩니다.

0

17

2

더빙에 어떤 ai가 쓰였는지 궁금합니다.

0

16

0

보안 적용에 대한 강의가 있을까요?

0

12

1

Auto-memory 기능

0

15

1

64강 context 7 관련 질문

0

14

1

Auto-memory 기능

0

16

0

55강 7분56초

0

13

0

55강 git 초기화 관련 질문이요

0

12

1

클로드 코드에 붙여넣기후 편집 관련 질문입니다!

0

17

1

존재하지 않는 일기 url입력 시 alert이 두 번 떠요

0

23

1

윈 터미널의 클로드와 에디터의 터미널의 클로드에 관한 질문

0

16

1

output-styles 명령어 없어 지지 않았나요?

0

20

1

[MISSION 7] 프로필 웹 Github 링크 제출하기 관련..

0

28

0

커서 클로드 코드 검색창 검색 시

0

20

1

/init 초기화 이유

0

28

2

Git commit 관련 질문

0

23

2

Powershell은 시스템관리자가 앱을 차단

1

26

2

Automatic batching에 관해 궁금한 점이 있습니다.

0

118

1

쓰레드 관련

1

434

1

Virtualized List 에 관한 질문이 있습니다.

3

522

1