오늘의 목표
- memoization
- @media
- memoization
index.tsx가 아니면 생략이 불가능
https://localhost:3000/32-01-memoization/container
state를 올릴경우 훅을 제외한 모든 것이 리렌더가 됨
어디까지?
그 자식 컴포넌트까지
그런데
react의 memo를 이용하면 렌더링을 막을 수 있음
import {memo} from "react"
화살표 함수로 만들고
memo(컴포넌트)하면 리렌더가 안됨
특정상황에서 리렌더가 필요할경우?
props로 조건을 넘겨주면됨
예를들어 state변경시 리렌더링 하고 싶으면 부모 컴포넌트에서 state를 props로 넘겨주면 state 가 변경되면 자동으로 리렌더가 됨
그러면 컴포넌트 안에서 변수를 리렌더하기 싫으면?
useMemo 훅이 있다
특정상황에서는 바꾸고 싶을 때 의존성배열을 사용하면 됨(useEffect)처럼
근데 useMemo는 많이 쓰이질 않음
함수를 다시 안만들어지게 하고 싶으면?
useCallback훅이 있음
근데 안에 state가 안바뀜
그래서 prev를 이용하면 됨
useMemo로 useCallback만들어보기
페이지가 어떤 기술로 만들어졌을까?
와팔라이저(wappalyzer)
- 반응형 웹 적응형 웹
한페이지에 많은 정보를 보여줘야 한다?
적응형 웹이 좋음
반응형
가운데를 1024~1280으로 잡고
@media를 이용
보통 가로를 많이 줄임
왜?
세로는 스크롤이 있으니까~
가로를 어떻게 주냐?
px말고 %를 이용한다
가로를 어떤 기준으로 줄 것인가?
1. 가장 많은 기종의 사이즈 중 작은것
2.
rem을 이용하면 폰트사이즈를 한 번에 바꿀 수 있다.
- 브라우저에 그림이 어떻게 그려질까?
가. 다운로드
나. html준비(DOM)
다. css준비(CSSOM)
라. 두개를 합치기(render tree)
마. 위치 그리기(크롬:Layout 파이어폭스:Reflow)
바. 색칠 하기(크롬:Paint 파이어폭스:Repaint)
그럼 뭐가 리플로우를 일으키고 뭐가 리페인트를 일으키는지?
https://csstriggers.com/
여기서 확인
블링크 크롬
게코 파이어폭스
웹킷 사파리
