• useReducer 사용해보기

Keyword

• useRef: typescript에서의 3가지 ref 정의

• resize evnet:

 useEffect(() => {
    setChartSize()
    window.addEventListener('resize', setChartSize)
    return () => window.removeEventListener('resize', setChartSize)
  }, [])

  const setChartSize = () => {
    if (chartBoxRef === null) return // 좋은 방법인지 찾아봐야..
    const boxHeight = chartBoxRef.current?.offsetHeight
    const boxWidth = chartBoxRef.current?.offsetWidth
    console.log(boxWidth)
    const chartHeight = boxHeight && boxHeight * 1.2
    const chartWidth = boxWidth && boxWidth * 1.2
    const boxSize = {
      chartWidth,
      chartHeight,
    }
    setChartBoxSize(boxSize)
  }

if (chartBoxRef === null) return 으로 방어코드를 넣어주는게
좋은 방법인지 찾아봐야한다 -> useLayoutEffect() 를 사용하는 것은 어떨지

useLayoutEffect()

useEffect와 동일한 API를 사용하지만 paint 이전 시점 동기적으로 실행된다 (깜빡임 없음)
-> useEffect는 paint이후 비동기적 실행 (DOM에 영향을 주는 코드 사용 시 화면 깜빡임)

componentDidMount나 componentDidUpdate와 동일한 단계를 실행

DOM에서 레이아웃을 읽고 동기적으로 리렌더링하는 경우에 사용 - 공식 문서
DOM 변경을 직접 수행해야 하는 경우에만 사용 - 블로그

동기적으로 실행되기 때문에 useLayoutEffect 사용하게되면
항상 ref가 있다는 것을 보장할 수 있을 것으로 보인다
how-to-use-useref-with-typescript

useEffect와 useLayoutEffect의 차이

• render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정
• paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정

spinner

react-loader-spiner 사용

문서에 height 오타 있음

import { Audio } from 'react-loader-spinner'

{isLoading && <Audio height='100' width='100' color='grey' ariaLabel='loading' />}

Audio spinner에 className를 줄 수 없는 것 같아
div로 감싸서 중앙 정렬 시도

카드 flip 효과 :hover

.cardBox {
      position: relative;
      width: 100%;
      height: 200px;
      transition: 0.4s;
      transform-style: preserve-3d;

      .cardFront,
      .cardBack {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        object-fit: cover;
      }

      .cardBack {
        transform: rotateX(180deg);
      }
    }

    &:hover .cardBox {
      transform: rotateX(180deg);
    }