Day 3

const inputRef = useRef<HTMLInputElement>(null);
const inputRef = document.querySelector(~~);

useRef의 기능을 한 번에 보여주는 예시.
React jsx를 가져올 수 있게 해준다.

css가 자꾸 발목을 잡는다. 코딩하면서 자연스럽게 배우려고 하고 있는데 조금 쉽지 않다. 나중에 한번 각 잡고 해야 할듯.

Framer motion 또한 굉장한 라이브러리다. 세상엔 참 유용한 라이브러리들이 많은 것 같다.

css로 해결할 수 있는 문제들이 은근 많다. 다시 한 번 css 공부의 필요성을 느낀다.

position: absolute

jsx의 key만 바꾸어 주면 react는 해당 jsx가 사라진다고 생각을 한다.
따라서 map을 굳이 사용하지 않아도 되는 것이다.

 <Box
	variants={box}
	initial="invisible"
	animate="visible"
	exit="exit"
	key={i}
>
	{i}
</Box>

여기서 map을 사용하지 않고 i만 바꾸어주면 동일한 애니매이션 효과를 줄 수 있다는 것이다. WOW.
머리로는 이해하기 힘들지만 마음이 이해하니 됐어.

layout and layoutId? no joke

<Nav /> //링크

useAnimation 으로 애니매이션을 구현할 수도 있다. 여러개의 애니매이션을 동시에 실행하고 싶을 때 사용한다.

const inputAnimation = useAnimation();

항상 null처리는 어렵다.

  <Banner bgPhoto={makeImagePath(data?.results[0].backdrop_path || "")}>

완벽하진 않은 야매 느낌...