[React] useMemo

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다

useMemo

특정값을 재사용 하고자 할 때 사용하는 Hook입니다.

 

메모지네이션 개념과 긴밀한 관계가 있는데, 메모지네이션은 기존에 수행한 연산 결과값을 메모리에 자장해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다. 메모지네이션을 적절하게 사용하면 중복연산을 피할수 있고 앱의 성능을 최적화 할수 있습니다.

useMemo 예제

useMemo사용하기 전

텍스트를 입력하면 문자를 자동으로 대문자로 변경해주는 코드입니다.

상단에 있는 버튼은 아무 영향을 주지 않는 잉여버튼입니다.

console창을 확인하면 문자 하나 입력 할때 마다 '문자가 입력되었습니다.'하는 log가 뜹니다.

하지만 버튼을 눌렀을때도 해당 log가 뜹니다.

useMemo사용한 후

기존 answer을 useMemo를 사용하여 버튼을 눌럿을 경우에는 log가 출력 되지 않도록 하였습니다.