온라인 1일차
코로나 2일차
집은 편하긴하지만 쉽지않네??
오늘 배운 것
메모이제이션에 대해서 배웠다. setState함수는 화면 전체를 리렌더 하면서 state와 다른 함수들을 다시 그려준다. 그런데 단순히 입력받은 데이터를 입력받을 때마다 컴포넌트가 리렌딩 되는 것이 불필요하다.
이럴때 메모이제션을 이용하는데, state가 변해 컴포넌트가 리렌더 되더라도 전체를 다시 그려주는 것이 아니가 기존에 저장된 값을 그대로 사용할 수 있도록 저장하는 것이다.
export default memo(Component) 를 사용하는 방법과 useMemo(()⇒ {}. [dependencyArray])를 사용하는 방법이 있다.
https://velog.io/@owlsuri/Memoization
useCallback도 있는데 useCallback(()⇒{}, [dependencyArray]) 이렇게 작성된 함수는 리렌더 되더라도 함수를 새로 그려내지 않아 효율적이다.
https://velog.io/@owlsuri/useCallback
Wappalyzer를 사용해서 다른 사이트들이 어떤 기술스택을 사용할 수 있는지도 알게되었다.
또 반응형 웹도 배웠다. 작은 모바일 화면에서도 정상적으로 볼 수 있도록 하는 것인데 @media와 크기별로 조건을 주어 만들 수 있었다.
https://velog.io/@owlsuri/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9
reflow와 repaint에 대해서도 배웠다. 브라우저가 개발자의 의도에 따라 스타일이 변경되는 경우가 많은데 이럴 때 발생하는 것이 reflow와 repaint다.
repaint의 경우 visibility를 DOM API를 통해 조절했을 경우 자식 노드들까지 검색하기 때문에 기능저하를 발생시킬 수 있으며 reflow는 해당 요소의 자식요소 뿐만 아니라 부모 요소 역시 레이아웃에서 검색하게 된다. reflow는 최소화하는 것이 좋다.
