렌더링 최적화를 잘하자..

 

렌더링 최적화를 잘하자.. 

 

오늘 무슨 짓을 했냐면은 

 

리액트로 개발함에 있어서, 제일 어렵고 까다로운게 뭐냐고 물어보면

 

 

렌더링이 많이 일어나는, 컴포넌트 내에서 내가 원하는 흐름의 렌더링을 삽입하는 코드를 다룰 때이다.

 

특히 배열을 순회하면서 코드를 실행하는 것이 그렇다.

 

(이전에 Array 메소드에 대해서 글을 올린 적이 있다)

 

 

렌더링이 유동적인 요소에 또다른 렌더링 플로우를 넣게 되면 

 

리렌더링이 지나치게 일어나 큰 성능 저하나, 에러가 날 수 있다. 

 

 

그렇기 때문에 사이드 이펙트를 제어함을 우리는 잘 알아야한다.

 

'나 리액트로 개발해요!' 라고 할거라면, 적어도 생명주기를 잘 컨트롤할 수 있는 것이다.

 

생명주기가 곧 리렌더링이고 리렌더링이 성능이라고 생각한다.

 

 

 

조만간 useEffect와 useLayoutEffect에 대해서 글을 올리겠다.

 

그리고 사이드 이펙트를 만약에 바닐라 자바스크립트로 작성한다면 어떻게 작성하는지에 대해서도 함 보겠다.