본문 바로가기
반응형

2022/09/182

React.memo - Memoization을 이용한 불필요 리렌더링 없애기 우선 비슷한 상황을 부트캠프 4주 프로젝트때 겪은 일이 있다. 위에서 보면 메모란에 타자를 칠때마자 사진이 깜빡이는 것을 확인할 수 있다. 이때 React.memo로 해결했었다. React.memo 간단히 설명하면 props가 변하지 않는데 side effect에 의해 리렌더링 되는 컴포넌트라면 리렌더링을 막을 필요가 있다. (위 gif처럼 메모란에 타이핑할때마다 사진컴포넌트가 리렌더링 되는 경우) 이럴때는 리렌더링이 불필요한 컴포넌트의 이전 props와 다음 props를 비교하여 , props변화가 없다면 이전 props를 사용하도록 메모이제이션 할 수 있다. 이를 가능하게 하는 것이 React.memo이다. 팀원분이 타이머 업데이트와 페이지 업데이트를 분리하고 싶은데, useMemo로 해결이 안된다고.. 2022. 9. 18.
Next.js 에서 Next/link와 a 차이 a태그 페이지 전체로드함,spa그런거 없음 서비스 외부 링크로 연결할 때 사용 Link태그 서비스 내부 링크로 연결할 때 사용하여 SPA를 적용할 수 있음 최적화 SPA가 적용된다. 개발자 도구에서 임시로 body 태그에 background:red를 넣고 Link태그로 이동, a 태그로 이동을 각각 해보면 Link태그로 이동했을때 : background가 바뀌지 않는다. SPA로 이동하기 때문이다. a태그로 이동했을때 : 페이지가 리렌더링되므로 background:red가 사라진다. 최적화 Link태그가 가져다 주는 최적화를 설명하려면 Next.js에서 기본적으로 제공하는 최적화를 설명해야 한다. Automatic Code Spliting Next.js는 Automatic Code Splitting을 제.. 2022. 9. 18.
반응형