& + &
SCSS에서 반복되는 요소 사이사이에 선을 넣어줄 때 + selector를 사용 할 수 있다
& + & {
border-top: 1px solid black;
}React.memo , useMemo
React.memo, useMemo는 서로 다르다.
React.memo는 Higher Order Component(HOC)로 감싼 컴포넌트의 props가 변경되었을 경우에만 컴포넌트가 리렌더링 되도록 하여 렌더링 성능 최적화에 사용된다.
useMemo는 함수형 컴포넌트에 사용되는 hook으로 값을 메모해두었다가 특정 deps array에 속한 값들이 변경되었을 경우에만 값을 재생성하고 그 이외의 상황에는 컴포넌트가 리렌더링 될 때 값을 재생성하지 않고 메모해둔 값을 재사용한다.
react-virtualized
다수의 아이템을 가진 리스트 컴포넌트를 렌더링 할 때, 아직 화면에 보이지 않는 컴포넌트까지 렌더링하게 된다면 시스템 자원 낭비일 수 있다. 이것을 react-virtualized를 통해 스크롤 되기 전에는 렌더링하지 않고 크기만 차지하도록 최적화 해 줄 수 있다.
객체 불변성
객체 불변성을 지킬 때 spread operator ...을 사용하면 shallow copy가 된다.
때문에 복잡하게 다중으로 nesting 된 객체라면 spread operator를 사용해 불변성을 지켜줄 때, 코드가 복잡해질수있다. immer 라이브러리를 사용하면 보다 쉽게 불변성을 유지시켜줄 수 있다.
Deprecated