143. [React] cashe(캐시)란? TIL 23.03.15

---

cashe

react를 공부하다가 cashe라는 용어가 나왔음.
react에서도 내가 기존에 알고 있는 저장소 같은 개념인지 궁금해서 찾아봤음. 
찾아보니 react에서도 비슷한 개념이라고 함. (컴포넌트의 이전 렌더링 결과를 저장)

캐시는 react 앱에서 컴포넌트의 렌더링 속도를 높이기 위한 기능.
react앱에는 여러 개 컴포넌트가 있고 props와 state도 다양하게 가지고 있음.
props와 state가 변경될 때마다 컴포넌트가 다시 렌더링 되어 새로운 결과를 만들어 내는데,
이때마다 불필요한 작업이 수행될 수 있음

캐시는 컴포넌트가 렌더링 될 때, 해당 컴포넌트의 가상 DOM을 생성하고, 이전에 렌더링 된 결과와 비교함
이전에 렌더링된 결과와 같은 경우, React는 캐시 된 결과를 사용하고, 다르면 새로운 가상 DOM을 만들어 다시 렌더링 함.

그래서 내가 원하는 것만 렌더링하고 다른 것들은 렌더링 안 하게 할 수 있음.

캐시 말고도
React.memo나 shouldComponentUpdate와 같은 메소드를 사용하여 불필요한 렌더링을 방지하는 것도 가능

React.memo : props가 변경될 때만 컴포넌트가 다시 렌더링되도록 함
shouldComponentUpdate : 렌더링 여부를 결정하는 메소드