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