useMemo 어떻게 쓰는지 모르겠어요 ㅠ

[노재근]

선생님 도와주세요

강의 막바지에 다왔는데 memo에서 막혔습니다 센세..

영상에 나오는 memo는 안되고 useMemo로 쓰라고 하네용

유튜브도 찿아보고 카톡으로 물어도 봤는데 아직 감이 잘 안잡힙니다..

 

일단 제가 마지막으로 해본 코드는 위와 같은데 전에 시도했던 방법이

 

function컴포넌트 각자 2개 만들고

하나만 useMemo(()=> test1, [props]); 이런식으로 해줬습니다.

근데 memo쓰니까 props로 받아오는게 안되는거 같더라구요

그래서 그냥 두개 묶어서 보여주는 컴포넌트 속으로 넣어버리니까 useEffect를 각자 넣지 말래서 상위 컴포넌트에서 2개 따로 만들어줬구요

차라리 그냥 Parent컴포넌트에서 프롭 받아온거 스테이트 만들어서 그거로 memo에다 넣으면 되지 않을까 해서 넣어봤는데

되긴 되는데 Parent자체가 리렌더링 되는건지 memo작동을 안하는것처럼 보이네요.

 

센세 질문 요약하겠습니다.

memo에 컴포넌트 넣을때 props를 어떻게 받아오나요? 그냥 넣으면 못찿습니다..
위 코드가 안되는 이유가 제가 예상한 이유가 맞나요?
위 코드를 어떻게(대충이라도) 바꿔야 될까요? 웬만하면 test1, 2 밖으로 빼서 돌려보고 싶은데 그렇게하면 console.log찍을떄 useEffect가 안먹습니다..

얼른 하산하고 싶습니다 사부님

 

 

[codingapple]

컴포넌트를 통째로 memoize 하고 싶으면 memo 함수 쓰시면 되고

특정함수만 memoize하고 싶으면 useMemo 쓰면 됩니다

 

위 코드는 사용법이 잘못되었을 뿐입니다 

useMemo는 첫 파라미터로 함수, 둘째 파라미터로 아무 자료나 넣으시면 되는데

둘째 파라미터가 변할 때만 첫 파라미터인 함수내부 코드를 실행해줍니다. useEffect랑 비슷하게 동작합니다 

그래서 useMemo 쓰실거면 그 함수 안에 html 넣거나 하시면 memoized된 컴포넌트처럼 동작하겠군요 

 

[글쓴이]

글