노드버드 리뉴얼 강의 정리 #12 리렌더링 이해하기
Prologue
노드버드에서 배운 지식들로 레퍼런스를 만들어보자.
주요 내용
Style에 객체를 넣으면 안되는 이유
리액트 (jsx)에서 아래와 같이 style에 객체를 넣을 수 있다.
<div style={{ marginTop: 10 }}>자바스크립트 기본지식 중 알아야 할 것이 객체끼리 비교하면 무조건 false가 나온다.
{} === {}; // false리액트에서는 Virtual Dom 을 사용해서 매번 리렌더링 시에 어디가 바뀌었는지 검사하는데 style에 객체를 넣게 되면 매번 객체 비교에서 false를 반환하여 새 객체를 만들게 된다.
그래서 이럴 때는 styled-components나 emotion을 써주는 것이 좋다.
const ButtonWrapper = styled.div`
margin-top: 10px;
`;이렇게 ButtonWrapper라는 styled component를 만들 수 있다.
단, 성능에 크게 영향이 없다면 그냥 인라인 스타일을 써도 된다.
너무 집착할 필요는 없다.
커스텀 디자인 및 flex 사용
기존 노드버드 디자인이 내 취향이 아니어서 AppLayout.tsx 파일을 내 마음대로 좀 커스텀했다.
css에서 display:flex에 대한 속성이 계속 햇갈리는데,
justify-contents가 가로에 대한 속성이고 ...
align-items가 세로에 대한 속성이다.
자세한 설명은 css-trick flex 설명을 참조하는 것이 좋다.
결과는 다음과 같이 나왔다.
그림자를 넣어주는 box-shadow도 이용했다.
useCallback과 useMemo의 차이?
useCallback은 함수를 캐싱한다.
useMemo는 값을 캐싱한다.
만일, 위에서 styled-components를 사용하는 것이 마음에 안든다면,
const style = useMemo(() => ({ marginTop: 10 }), []);위와 같이 처리하여 주면 캐싱을 할 수 있다.
리렌더링을 하면, 무조건 모든 엘리먼트를 다시 그릴까?
함수 컴포넌트 안의 내용들이 처음부터 끝까지 다시 실행되는 것은 맞음.
하지만 useCallback은 deps에 지정한 값만 바뀌지 않는다면 캐싱된 체로 바뀌지 않는다.
또한 return 아래의 부분도 전부 다 다시 그리는 것이 아니라 return부분 중에 바뀐 부분만 다시그리게 된다.
이를테면,
<div style={{marginTop: 10}}></div>라는 부분이 존재한다면, 이 부분만 객체 비교를 하기 때문에 다시 그린다.
결론적으로 다시 함수는 실행하지만 다시 그리는 것은 달라진 컴포넌트만 다시 그린다.
