재렌더링이 일어나는지 확인하는법

return 안에 state가 바뀔 경우 return 함수 자체가 재랜더링이 되는데 그러다보니 불필요하게 재랜더링 되는 요소가 많다.

그것을 확인하는법 

크롬 웹스토어에 react-devtools를 설치한뒤 f12 개발자 모드를 띄운 후 components 창에 highlight 체크를 해주면 

재랜더링이 되는 요소가 횟수에 따라 파랑 ---> 빨강 순으로 표시 된다.

 

리액트 hooks 환경에선 memo로 컴포넌트를 감싸주면 불필요한 재랜더링을 막아준다.

 

ex) export default memo(Test);

---

 

Map( ) 관련 map반복문 key 값에는 고윳값이 들어가야 되는데 간혹 map함수의 두번째 인자 index 값을 넣어주는 경우가 있다. 이 경우 배열 추가는 상관이없지만 수정이나 삭제의 경우 최적화할 때 react에서 감지를 못해 문제가 되므로 

다른 고윳값을 넣어 주는 게 좋다.

 

 

---

javascript 환경에서 특정 DOM을 건들이고 싶을 때 ref를 사용하는데, hooks에서 ref를 사용할 때 는 useRef( )로 만들고 current를 붙여준다.

 

ex) const nameInput = useRef(); // 사용시 nameInput.current.focus();

 

useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 한다. 그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 된다.

또 훅스에선 ref가 this 기능을 가진다

return 함수에서 useRef를 사용하면 저장은 되지 않아서 return 함수에서 재랜더링이 일어나지 않는다.

ref는 값이 바뀌기는 하지만 화면에 영향주고싶지않을 때 사용한다