useMemo Memoization은 동일한 값을 리턴하는 함수가 있을 때, 해당 값을 메모리에 저장해서 필요할 때마다 재사용 하는 것. 즉, 자주 사용하는 값을 캐싱하는 것. 여기서 알 수 있는 것은 함수 컴포넌트의 경우 렌더링 될 때 모든 내부의 변수가 초기화 되면서 다시 렌더링하게 된다. valueMemo를 보면 의 구조를 알 수 있다. 두개의 인자를 가지고 있으며, callback 함수와 의존성 배열을 가지고 있다. 의존성 배열을 통해 값을 원하는 순간에만 업데이트 후 다시 저장할 수 있다. 하지만 그렇다고 해서 불필요한 값까지 저장하게 된다면 성능저하로 이어질 수 있다 👉 메모리에 값을 저장하는 것이기 때문

✨ useRef 은 mutable ref object를 리턴함. reference는 read-only이거나 mutable하다. read-only : 읽기 전용 / mutable : 변경 가능한. ref 객체를 리액트에 전달하면 리액트는 속성에 상응하는 DOM node값을 set한다. 여기서 중요한 것은 는 마운트 될 때 DOM node에 set되고, DOM node가 사라지면 로 변경된다. 즉 useRef()는 초기 값을 그대로 읽거나 혹은 초기 값에서 변경되는 값을 사용한다. useRef()는 언제 사용할까? 📍 옵션 1: DOM Element Ref 주로 useRef()를 사용하는 방법 중 하나는 DOM element를 참조할때이다. 초기 값은 로 설정한다. 이때는 DOM 엘리먼트를 참조하는 것이기 때문에 값은 읽기-전용으로 사용된다. DOM Element를 참조할 때는 어떤 엘리먼트를 참조하는지 type을 지정해준다. >>>> 👉 최대한 자세하게 타입을 지정해준다. 만약…

1. react-custom-scrollbars 이름처럼 스크롤바를 간단하게 바꿔주는 라이브러리 첫 doc에는 생각보다 자세하게 안나와있는데 v2 doc에 자세하게 나와있다. 스크롤과 스크롤바를 커스텀하기 위해서는 track, thumb의 기존 props를 받은다음 커스텀하는 방법이 있는데 document가 깊숙하게 숨겨 있어서 가져와봤다. 여기서 중요한 것은 clasName을 똑같이 작성해줘야 기존에 라이브러리가 지정한 기본 스타일을 변경할 수 있다! 출처 : react-custom-scrollbars 출처2 : react-custom-scrollbars-2 2. react-scrollmagic 아마 대부분 리액트로 프로젝트를 변경하면서 제이쿼리에서 스크롤 애니메이션을 사용할 때 자주 사용하는 라이브러리 일 것이다. 스크롤 매직은 리액트에서도 사용할 수 있다! 사용방법은 너무 간단하다. 오히려 제이쿼리로 사용했을 때보다 더 직관적인거 같기도하다 😘 해당 라이브러리의 유일한 단점은…