WIL. state props rerendering

React로 개발한 웹페이지는,

State가 변경됨에 따라 렌더링이 다시 실행된다.

 

컴포넌트 구조를 어떻게 구성했느냐에 따라서,

직접적 관계가 없음에도 불구하고, 상위컴포넌트에 의해서 렌더링이 일어날 수도 있다.

 

state를 props로 받지 않음에도 렌더링이 일어날 수가 있는데,

이러한 경우에 메모이징을 통해서 렌더링을 막을 수 있다.

메모이징을 하기 위한 hooks는

useMemo, useCallback, React.memo 등이 있는데, 용도가 다 다르다.

 

 

대상이 값이냐 함수냐 컴포넌트냐로 나눌수도 있지만,

정확한 구분은, 코드의 구조와 컴포넌트 리렌더링 상황에 따라서

사용해야 하는 훅이 달라진다고 하는 것이 더 적절할 것 같다.

 

 

반복문을 사용해서 요소를 컨트롤할 때,

이러한 부분을 신경쓰지 않으면 리렌더링이 마구잡이로 일어나서

웹페이지의 성능을 저하시킬 수 있기 때문에

코드를 작성하기전에 생각을 해가면서 하는게 중요하다

 

또한 코드상의 모듈들을 하나하나 다 완성할때도,

브라우저를 통해서 렌더링되는 모습을 모니터링하고 수정해주는 습관이 필요할 것 같다.

나중에 잔뜩 모인상태로 리렌더링 난리나면 어디부터 고쳐야할지 답도 안나올 것 같으니..