19. React.memo 를 사용한 컴포넌트 리렌더링 방지 · GitBook

undefined

https://react.vlpt.us/basic/19-React.memo.html

Oct 15 '19 09:10 utterances-bot

React.memo 가 안먹히네요.. 분명 여태까지 전부 맞게 따라왔는데, input바꿔도, user쪽이 계속 리렌더링 됩니다.. ㅜ UserList에 UserList function에도 적용했고 User에는 const User = React.memo(function~)이런식으로 적용하고 CreateUser에서도 똑같이 해줬는데 그래도 안 되네요.. 이유가 뭘까요 ㅜ

Feb 03 '20 09:02 JohnQue

아 해결했습니다!

Feb 03 '20 12:02 JohnQue

저도 윗 분처럼 React.memo가 안 먹히는데 어떻게 해결했는지 알 수 있을까요.

Feb 07 '20 07:02 kko0831

React.memo 안먹힙니다 ㅡㅡㅡ

Apr 13 '20 16:04 JmKanmo

이게 크롬브라우저 문제인지 렌더링 되는거처럼 뜨는데 실제로 console.log찍어보면 먹혀요.

Apr 14 '20 08:04 JohnQue

네 Que님 말씀대로 그렇게 해서 확인햇습니다ㅎㅎ. 강사님 코드와는 별개의 문제엿어요

Apr 14 '20 09:04 JmKanmo

늘 많은 도움 받습니다 감사합니다

Oct 28 '20 00:10 sbin0819

감샤합니다:)

Nov 03 '20 08:11 yunanah

함수형 업데이트를 하게 되면, setUsers 에 등록하는 콜백함수의 파라미터에서 최신 users 를 참조 할 수 있기 때문에 deps 에 users 를 넣지 않아도 된답니다.

라는 본문이 의미하는것이

setUsers 에 함수형 업데이트를 하게되면, 비동기적으로 일어나지 않고 큐에 들어가서 차례대로 처리되기 때문에 항상 최신상태를 유지할 수 있어서 업데이트 될 때마다 함수를 만들지 않아도 된다는 맥락으로 이해해도 괜찮을까요?

Nov 18 '20 04:11 ghost

React.memo를 통한 최적화

React.memo()안에 컴포넌트(여기서는 함수)를 인자로 넣는다.

최적화가 필요한 상황이 아니라면 useCallback을 통한 최적화는 고려해보자
- 최적화는 학습을 좀 더 하고 사용하면 좋을것같다.

Jul 09 '21 14:07 wenodev

서버 껏다 켜보세요 먹힙니당

Aug 08 '21 09:08 DoK6n

감사합니다!!

Aug 10 '21 03:08 jody96

React.memo 두번째 인자의 설명에서 "하지만, 이걸 잘못사용한다면 오히려 의도치 않은 버그들이 발생하기 쉽습니다. 예를 들어서, 함수형 업데이트로 전환을 안했는데 이렇게 users 만 비교를 하게 된다면, onToggle 과 onRemove 에서 최신 users 배열을 참조하지 않으므로 심각한 오류가 발생 할 수 있습니다." 이렇게 설명되어있는데, 함수형 업데이트가 아닌 deps를 이용해 onToggle/onRemove가 정의되어있더라도, users가 변경되면 해당 함수들도 어차피 재선언되는거 아닌가요? users가 변경되어 리렌더링 되면 어차피 해당 함수들도 변경된 상태일거고, 반대로 users가 변경되지 않아 리렌더링되지 않는 상태라면 해당 함수들도 재정의되지 않은 상태일텐데 어떤 점이 문제인지 이해가 안갑니다..

Sep 09 '21 14:09 neosigmund

React.memo 함수 : 필요한 상황에서만 리렌더링을 하도록 설정 (컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지)

상태 관리 시 함수형 업데이트를 하면 최신 상태를 참조하기 때문에 useCallback의 deps에 넣지 않아도 됨

useCallback, useMemo, React.memo 는 컴포넌트의 성능을 실제로 개선할수있는 상황에서만 사용하기!!! (불필요한 비교 & 버그발생)

Sep 26 '21 01:09 sshusshu

deps에 users가 있으니까 전체가 리렌더링 되는거고 input을 입력할 때 UserList가 리렌더링 되자 않는건 해당 props가 없기 때문인건가요??

Nov 09 '21 05:11 pyozz

아... React 메카니즘이란... 쉽지 않군요. 만든사람이야 그려려나 하겠지만, 저걸 따라하려는 사람들은... Virtual DOM은 그럼에도 불구하고 매력적인 거겠지요?

Dec 08 '21 04:12 aaboo

그러네요 콘솔찍어보니 먹히네요.. 이거때문에 완전 시간날림 ㅋㅋ

Feb 03 '22 11:02 yongyonghw

벨로퍼트 그는 신이얌

Feb 12 '22 06:02 josunyjostar

진짜 이상하네 createUser 크롬 개발자 도구에서 왜 렌더링 된다고 하이라이트 찍히는것인지.. log가 신뢰도가 높네요

Feb 12 '22 07:02 josunyjostar

함수형 컴포넌트가 렌더링 되면 일단 해당 컴포넌트에 영향을 미치는 부분 전체는 데브툴이 하이라이트 해주고요... 실제로 말단 컴포넌트에서 리렌더링이 안되는지는 프로파일러를 돌려봐야 합니다. 상단에서 set함수가 호출되기에 상위 컴포넌트가 렌더링 되는건 당연한 현상입니다

Jul 28 '22 02:07 i0boy

마지막 문단의 글이 잘 이해가 되지 않습니다.

"하지만, 이걸 잘못사용한다면 오히려 의도치 않은 버그들이 발생하기 쉽습니다. 예를 들어서, 함수형 업데이트로 전환을 안했는데 이렇게 users 만 비교를 하게 된다면, onToggle 과 onRemove 에서 최신 users 배열을 참조하지 않으므로 심각한 오류가 발생 할 수 있습니다."

아래 코드로 UserList 컴포넌트의 React.memo의 두번째 인자를 콘솔로 찍어봤는데 함수형 업데이트를 사용하거나 사용하지 않았을 때 모두 동일하게 정상 동작하는 것 같아서요! 어떤 심각한 오류가 왜, 어떻게 발생하는 걸까요?

(prevProps, nextProps) => { console.log(prevProps.users); console.log(nextProps.users); return console.log(prevProps.users); === nextProps.users }

Aug 27 '22 16:08 proamateur92

덕분에 열심히 배우고 있습니다. 답변을 달아주실지 모르겠지만 혹시나 싶어 글 올립니다. Toggle 함수의 setUser함수를 함수형 업데이트 변경 후에 테스트 다시 해보았는데

user 활성화 변경 시 모든 users가 재랜더링 되는데 이 부분은 정상 적일 까요?

배열의 수가 바뀌는게 아닌 users 안의 여러 객체중 일부부만 바뀌는 것일텐데요

React.memo의 얕은접근을 하기때문에 배열이나 객체의 경우 주소값으로 비교 하는으로 알고있는데

제가 잘못 알고 있는 부분일까요?

Oct 26 '23 05:10 JungSuRy

위의 예제에서 memo 적용 이후, input에 텍스트를 입력할 때 "활성 사용자 수" 부분은 하이라이트 표시 되지 않는데, 제가 테스트 할 때는 이 부분도 하이라이트가 되더라구요

input에 값을 입력할 때마다, inputs라는 State가 변경되는 거니깐, "활성 사용자 수" 부분도 하이라이트 표시가 되어야하는게 아닌가요?

Dec 06 '23 04:12 songinno

react-tutorial react-tutorial copied to clipboard