렌더링이란?
컴포넌트 함수가 호출돼서 JSX를 반환하는 과정이다.
setState가 호출되면 함수 컴포넌트가 호출되고 그 결과가 가상 dom tree에 들어가고 이전 가상 dom과 실제 dom을 비교한 뒤 달라진 부분이 있으면 실제 dom에 반영되어 브라우저 렌더링이 시작된다.
리액트에선 가상dom을 사용하여 렌더링하고 js 객체 형태로 변환된다. React.createElement()메소드를 통해 리턴값을 객체로 변환한다.
리렌더링은 그 함수 컴포넌트가 다시 호출되는 것이다.
props가 바뀌면 내부적으로 새로운 가상 dom과 실제 dom을 비교한 뒤 변경된 부분만 실제 dom에 반영되어 리렌더링이 일어난다.
그럼 무엇이 함수를 호출하게할까?
리렌더링 조건
-
state 값이 바뀌었을 때
하지만 무조건은 아니다. 같은 값으로 state를 업데이트하면 리액트에서 최적화 때문에 브라우저 리렌더링이 되지않는다. -
부모 컴포넌트가 리렌더링될 때
자식 props가 바뀌지않아도 부모가 다시 호출되면 자식도 리렌더링 된다.
그럼 버튼을 눌렀는데 콜백함수에 setcount1만 계속 업데이트되면 어떻게 될까? 버튼 클릭 시 Child 컴포넌트는 리렌더링 될까?
리액트 렌더링이 함수를 실행하는 것이라면 처음 setCount(1)이 Parent를
렌더링 시키면서 Child가 리렌더링 된다.
createElement가 넘어온 인자를 호출할 때 props가 계속 같은 값여도 그거에 관계없이 세터가 호출되면 함수호출이 되는 것이다.
하지만 child결과로 dom이 나오는데 dom은 똑같기때문에 가상 dom과 실제 dom이 동일해지고 실제 dom에 노드들이 변하지않아 브라우저 리레더링은 일어나지않는다.
위 사진 코드를 react.memo로 부모 컴포넌트를 감싼다면 리렌더링이 될까?
위 사진과 같은 경우 부모가 렌더링되면 자식도 같이 리렌더링되는데, react.memo를 사용하면 props가 변경될 때만 컴포넌트가 다시 렌더링된다.
이 안에 조건문을 넣고 이전 props와 현재 props를 비교해서 다르면 return 다시 렌더링하고 같으면 return 이전 캐싱해온거 돌려주는 방식이다.
그래서 react.memo를 남발하면 브라우저 메모리 사용량이 늘어 비효율적일 수 있다.. 그래서 항상 쓰기보단 리렌더링 비용이 큰 컴포넌트에서 필요한 경우에 주로 사용한다.
즉, 부모가 다시 렌더링돼도 자식 props가 그대로면 자식 함수는 다시 호출되지 않고 이전 렌더링 결과를 그대로 재사용하기 때문에 props가 같으면 리렌더링이 되지 않는다.
