53일차 배운 것 정리

목차

1. Day53, React 6강

1. Flux 컴포넌트

• type
• Flux.Row : flex-direction을 row를 기반으로 한 flex 컴포넌트
• Flux.Col: flex-direction을 col를 기반으로 한 flex 컴포넌트

• props
• Row
• justify, align : 정렬을 위한 옵션
• gutter : Flux 컴포넌트 전체에 적용되는 상하좌우 여백
• Col

• tip
• 2,3,4,6 으로 나누어질 수 있는 12를 기준으로 Flux 컴포넌트를 구성한다.
 

• 더 공부할 것
• gutter CSS 적용 기준 확실히 모르겠음
• Row는 marginLeft, Right로 주고
• Col은 왜 PaddingLeft, Right로 주는지

2. BreadCrumb 컴포넌트

• type
• Container
• Item

• props (Item)
• href : event 발생할 경우 이동할 주소를 넣어준다.
• active : 현재 위치를 표시하기 위한 prop

• 더공부할 것
• 마지막 Breadcrumb 컴포넌트임을 확인하기 위해서 React.isValidElement, React.CloneElement 와 같은 함수를 통해 구현하는데, 가독성도 그렇고 굳이 이렇게 구현해야하는지 잘 이해가 되지 않는다.

• tip
• 경로들 사이의 구분을 지어주는 Icon은 마지막에는 나타나지 않도록 처리

2. useHooks

1. useHover

• 사용시
• [ref, state] = useHover()
• ref : 연결할 Element
• state : 현재 hover 여부

• 내부구현
• state : 현재 hover여부 (by useState)
• 이벤트함수
• handleMouseOver : hover되었을 때 이벤트 핸들러
• handleMouseOut : 마우스가 나갔을 때 이벤트 핸들러
• useEffect
• useRef를 통해, ref에 element가 연결되면, useEffect를 통해 이벤트함수들을 연결해줌

1-1.

2. useScroll

• 사용시

• 내부구현
• state: 현재 x, y의 좌표를 객체로 표현
• ref : 현재 등록된 element
• useEffect
• 스크롤 여부에 따라 이벤트핸들러를 실행하고, state 값을 변경
• 이벤트 핸들러
• handleScroll
• 현재 연결된 ref의 scrollLeft, scrollTop 값을 현재 state에서의 x, y 좌표로 변경

• 추가 기능
• button 클릭을 통해, 특정 지점으로 이동
• ref.current.scrollTo의 top, left 값을 변경하도록 하여, 변경 (ref를 통해 직접 dom을 조작)

• 성능최적화 처리
• addEventListender의 3번째 options 객체의 passive: true
• 브라우저가 e.preventDefault 여부를 체크하지 않도록 하여 약간의 성능 이득
• reflow를 조금 방지하기 위한 RequestAnimationFrame 사용
 

• 더 공부할 것
RequestAnimationFrame 에 대해서 알아보기

2-1.