코드스피츠 스터디
Display group
- Display(레이아웃): 지오메트리를 구성할 때 쓰는 알고리즘===속성 (+position)
- 6개의 그룹으로 나뉜다
- Outside: nomal flow관련된 것 (Block, Inline)
- Box: 기존 box규칙을 무시하고 대체하는 것 (content, none)
- Inside: 나는 block으로 배치되고, 내 자식들은 이렇게 그려라(flex,grid,table)
- Legacy: 나는 inline-block으로 배치되고, 내 자식들은 이렇게 그려라
(inline-block, inline-flex, inline-grid)
flex box
- 직계자식만 flex-item
- 한줄만그리는 정책 flex-line
- flex-item에 쓸 수 있는 order는 돔의 구조를 바꾸지 않고 reflow를 하지않는다
repaint만 하기 때문에 성능에 좋다
실습 후 알게된 점
- 중복 코드를 클래스로 빼면 깔끔해진다
- 스크롤이 생긴 이유
- frame에 box-sizing:border-box를 안해줘서 padding이 바깥으로 생겼기 때문
- flex-grow는 남은 공간에 대한 비율이기 때문에 margin을 줘도 부모의 크기를 넘어서지 않는다
와플카드 피드백
상황
부모가 가진 상태에 따라 자식 컴포넌트의 렌더링 유무가 결정될 때
기존 구현 방법
- 부모의 상태를 자식 컴포넌트에 props으로 넘겨서 해당 자식 컴포넌트 내에서 props이 어떤 값인지에 따라 display:block/none으로 처리함
피드백
- 부모 컴포넌트 단에서 조건부 렌더링으로 처리하는 게 좋다
#프론트엔드