useCallback1 휠 줌 하나 붙이려다 react한테 두 번 혼났습니다. - 마이페이지 레거시 리펙터링 후기 안녕하세요. 회사에서 마이페이지 회원정보 화면의 레거시 코드를 정리하다, 프로필 사진 업로드 기능을 손보게 되었습니다.사진을 고르면 그냥 그대로 올라가는 구조라, "동그란 틀에 맞춰 확대/이동해서 잘라올리는" 크롭 기능을 넣기로 했습니다.ex. 인스타 프로필 드래그로 위치를 옮기고, 마우스 휠을 굴리면 확대/축소되게 만들고 싶었는데, 바로 이 '휠'에서 react에게 2번 혼났습니다.먼저 이 글에 나오는 개념만 가볍게 짚고 갈게요. 리렌더: React는 상태가 바뀌면 화면 그리는 함수를 처음부터 다시 실행해요. 이때 함수 안의 변수들도 매번 새로 만들어집니다.ref(메모지): 리렌더가 일어나도 지워지지 않는 메모지. 화면에 직접 안그려지는 값을 적어둘 때 씁니다.(ex. 확대 비율 xx배) useRef로.. 2026. 6. 23. 이전 1 다음