useMemo => 어떤 연산된 값을 기억을 해놓는 방식
일단 리스트를 만들고 화면에 map으로 뿌려보자
그리고 합계를 구하는 함수를 만들어서 합계 또한 화면에 뿌려보았다. 그리고 이제 저 list에 값을 하나 추가를 하겠다.
이렇게 버튼을 만들어서 10을 추가하고 버튼을 눌렀더니 10이 추가가 되고 합계는 20으로 바뀌었다.
한번더 눌렀더니 10이 또 추가되고 30이 추가되는 것을 볼 수 있다. 이 말은 내가 list의 값을 바꾸면 return이 다시 실행되고 return이 다시 실행되면 합계쪽에 getAddResult함수가 다시 실행되는 것이다.
그리고 나서
문자를 안녕으로 변경하는 버튼을 만들었다
여기서 리스트값 추가 버튼을 두번 누르니 10이 두번 추가되고 합계는 30으로 변하였다. 그리고 여기서 문자 변경 버튼을 누르면
문자는 안녕으로 변하였는데 콘솔을 보면 sum함수가 또 실행이 되었다. 근데 문자 변경을 눌렀을땐 이게 실행 될 필요가 없지 않은가..?
저 문자 변경 버튼이 실행이 되면 Str 변수의 상태가 변경이 되고, {str}로 str을 뿌렸던 부분을 포함하여 전부 다시 return을 하기 때문에 문자변경 버튼을 눌러도 sum함수가 또 실행이 되는 것이다.
그럼 문자열 버튼을 눌렀을 때 sum함수까지 실행되는 걸 막고 싶다.
그 방법으로 useMemo를 사용할 수 있다. useMemo의 첫 번째 매개변수로는 기억할 함수를 넣으면 된다. 두 번째는 디펜던시리스트인데 뭐가 변경되었을때 실행이 되면 되냐를 넣는다.
결과를 보면
리스트값 추가를 두번 눌렀을때 sum함수는 두번 실행이 된다.
다음 문자변경 버튼을 눌렀을때 기존에 sum함수가 또 실행되는게 콘솔에 찍혔었는데 이제는 찍히지 않는다.
이번 게시글은 여기까지
이 글은 유튜브 메타코딩 채널의 영상을 보며 공부한 내용을 기록한 것입니다.
