💜 리액트/React2024. 6. 10. 10:51[React] memo, useMemo, useCallback 사용해서 렌더링 최초화 하기!!
시작하기 앞서...제목, 내용, 이미지를 입력하는 페이지에서 내용을 입력할 때마다 사진이 계속 다시 렌더링 되어 깜박거리는 현상을 발견하였다.그래서 이를 해결하기 위해 렌더링을 최소화하는 방법을 찾아보았다. React Developer Tools크롬 확장 프로그램 중에서 React Developer Tools 를 설치하고개발자 도구 -> Profiler -> 설정에서 Highlight updates when components render 를 클릭하면 어디서 렌더링이 발생하는지 시각적으로 확인할 수 있게 된다. 그러면 아래 사진처럼 렌더링이 일어나는 부분에 노란색 테두리가 생기게 된다.입력되는 부분은 내용인데 불필요하게 사진이 있는 곳까지 다시 렌더링 되어 사진을 화면에 보여주다 보니 깜박거리는 현상이 ..