1. className
classNames에도 논리식을 통해 특정 클래스를 부여할 수 있다.
참고: https://github.com/JedWatson/classnames
ex: classNames('foo', { bar: true });
짤막 css 개념 복습: inherit ->부모의 속성을 그대로 계승함
shrink : flex-shrink CSS property는 flex-item 요소의 flex-shrink 값을 설정하는 속성. 만약 flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소된다.
2. Devide
경계를 주는 컴포넌트
3. 웹킷
웹킷(영어: WebKit)은 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 응용 프로그램 프레임워크
4. 왜 Ref였지?
const lastTodoIdRef = React.useRef(0);
const addTodo = (newContent) => {
const id = ++lastTodoIdRef.current;
const newTodo = {
id,
content: newContent,
regDate: dateToStr(new Date()),
};
setTodos((todos) => [newTodo, ...todos]);
};강사님 코드에서 id 시퀀스 부분이 Ref로 처리되어있다.
강사님 수업을 거슬러올라가서 왜 그렇게 하셨었는지 확인해보는것도 좋지만
몸 컨디션 돌아와가는김에 직접한번 생각해보기로 했다.
useRef같은 경우는 갱신되어도 실제로 재 랜더링이 즉각적으로 이루어지는 값이 아니다.
그렇기에 갱신 및 보관이 필요하면서도, 실제 재 랜더링이 필요하지 않은 값의 관리에 적합하며, id 시퀀스는 이런 사항을 만족시키기에 사용되었다고 보여진다.
5. SwipeableDrawer
스와이프로 드로우어를 끌 수 있다.
onOpen을 필수로 설정해줘야한다.
lign-height -> 행간
items-baseline text기반으로 베이스라인에 맞게 정렬해준다. 행간이 변경되면 변경된 행간에 맞춰서 전체 아이템이 정렬된다.
