React

Hook

useLayoutEffect

Animation을 적용할 때 사용하는 것이 적합하다.
👉 대신 성능이 저하될 수 있다.

DOM Commit 이후에 실행되기 때문에 useEffect보다 먼저 실행된다.
👉 애니메이션에 적합한 이유이다.

---

Refs

React Component Rendering에 영향을 주지 않으면서,
다음 Rendering에도 값을 기억하기 위한 수단이다.

DOM 요소에 접근할 때에도 사용된다.
👉 queryselector 등보다 신뢰할 수 있다.

useRefs(초깃값)  // Refs (참조 객체) 생성 => { current: 초깃값 }

애니메이션 구현하기

gsap을 이용하여 animation을 구현하려면,
useRef Hook을 사용하여 명령형으로 useLayoutEffect나 handle function에서 사용한다.

사용법

useRef 객체를 생성한다.

const circleRef = useRef(null);  // { current: null }

JSX 요소에 Refs 객체를 전달한다

<figure
  ref={circleRef}  // 유일한 요소로 지정한다.
/>

useLayoutEffect 또는 Handle Function을 연결하여 사용한다.

useLayoutEffect(() => {
  gsap.set(circleRef.current, ...);
}
const handleEnter = (circleRef.current) => {
  gsap.to(circleRef.current, ...);
};

---

prop-types

prop-types를 이용하여 props의 type을 검사하거나 지정해준다.

import { 내장메소드들 } from 'prop-types';

Component.propTypes = {
  부여된props1: 속성.isRequired  // '속성' 타입이어야 하고 필수값이다.
  부여된props2: arrayOf(속성)  // '속성'으로 구성된 배열이어야 한다.
  부여된props3: oneOf([속성1, 속성2])  // '속성1', '속성2' 중 하나여야 한다.
  부여된props4: shape({
    key1: 속성1,
    key2: 속성2
  })  // key1과 key2를 가지며, value의 속성은 각각 '속성1', '속성2'이다.
  부여된props5: exact({
    key1: 속성1,
    key2: 속성2
  })  // shape과 똑같지만, 다른 key는 추가할 수 없다.
}

.eslintrc.cjs의 ignorePatterns에 linting하지 않을 것들을 정의할 수 있다.