[TIL] 2022 - 04 - 02

📚 Futher Study

• React/Nextjs inflean 강의
• cryptoZombie 다시 시작 (주요 개념은 정리해두자)

프론트 감을 잃지 않기 위해 리액트 공부를 다시 시작했다. nextjs, styled-component, ant-design 등등 새로운 것들이 많다. 프론트는 정말 끝이 없는 것 같다 😢

📌 react 리렌더링

함수형 컴포넌트가 리렌더링 될 때에는,

• 리턴 바깥은 전부 다시 실행된다. 그러나 useMemo, useCallback가 적용된 값/함수는 리렌더링될 때에도 바뀐 것이 없는 것으로 간주한다. useMemo, useCallback의 dependancy 배열 인자 중 하나가 바뀌면 바뀐 것으로 본다.

• 리턴 내부도 전부 다시 실행되기는 하나, 전부 다시 그려지는 것이 아니라 달라진 부분만 찾아서 다시 그린다. 이 때 인라인 스타일링 사용에 주의해야 하는데, 인라인 스타일링은 객체 형태로 정의한다. {} === {}는 false 이기 때문에 사실 변화가 없는 것임에도 불구하고 리렌더링 때마다 바뀐 것으로 간주된다. 따라서 함수형 컴포넌트 안에서는 CSS 적용을 위해 useMemo, useCallback 혹은 styled-components를 활용하는 것이 좋다.

❗️ 리액트에서 리턴 내부를 처음 한번은 그려준다. 리렌더링 될 때에는 이전 컴포넌트의 virtual DOM과 나중 컴포넌트의 virtual DOM을 비교해서 달라진 부분을 리액트가 캐치하고 그 부분만 다시 그린다. virtual DOM은 리턴 내부의 React components와 밀접하게 연관된 것으로 이해하면 된다.