이런 이미지는 어떻게 제작해야할까요..?

[정중식]

이걸 응용하면 걸어다니는듯한 효과를 줄 수있는데,
이미지 하나하나 만드는수밖에없는걸까요?
아니면 .. 다른 편법같은게있어서 이미지 하나만으로 걸어다니는 효과를 줄 수 있을까요?

[codingapple]

이미지는 전부 직접 만들어야할듯요
아니면 gif 애니메이션의 경우 프레임맘대로 조작할수있는 라이브러리같은것도 있을듯요

[정중식]

감사합니다. 선생님 추가로 하나더 여쭙고싶습니다.

리액트에서 유저 화면에 보이면 문구가 스르륵나타나는 애니메이션같은건 어떤식으로 구현하면 좋을까요?...

이런식으로 작성을해봤는데.. 동작을 잘 안하는것같습니다.

ObserverViewport.tsx

import { useEffect, useRef } from 'react';

const ObserverViewport = () => {
  const elRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = elRef.current;

    const animationWhenDisplayed = () => {
      if (el) {
        if (window.innerHeight > el.getBoundingClientRect().top) {
          el.classList.add('moveUp');
        } else {
          el.classList.remove('moveUp');
        }
      }
    };

    window.addEventListener('scroll', animationWhenDisplayed);

    return () => window.removeEventListener('scroll', animationWhenDisplayed);
  }, [elRef]);

  return elRef;
};

export default ObserverViewport;

Home.tsx

const Home = () => {

  const ref = ObserverViewport();

return(

              <div className='left-box' ref={ref}>
                <p className='title'>시대의 아이콘</p>
                <p className='text'>
                  매일 찾게 되고
                  <br />
                  언제 입어도 질리지 않는 <br />
                  Jean처럼 시대의 아이콘이 되겠습니다.
                </p>
              </div>

              <div>
                < img src={newJeans01} alt='' />
              </div>
 

}

[codingapple]

el 변수에 아무것도 안들어있는게 아닐까요

[정중식]

그렇네요,,

Home.tsx파일안에서 이런식으로 콘솔찍으면 div값이 잘나오기는하지만,

const ref = ObserverViewport();

console.log(ref);

<div className='left-box' ref={ref}> ..

ObserverViewport.tsx파일에서
콘솔(el)찍으면 없다고뜨네요.. 에혀.. 내 머리..

선생님 그런데 리액트를 좀 초보스럽게 몇번 만지면서 생각하게된건데,
여러 이벤트 혹은 애니메이션등등을 설정해주는게 쌩html,css,js로 하는것보다 너무 번거로운거같아요
(사실 썡 html,css,js로도 잘 못하지만요..)
useRef라던가 useEffect신경도 써야하고.. 
선생님은 리액트에서 애니메이션이나 뭐 이벤트 기타등등할때 어떻게하세요?
애니메이션용 타 라이브러리 사용하시나요?

[정중식]

쌤 저는요 방법을 찾은거같아요..

https://github.com/morellodev/react-awesome-reveal

이거를 쓰려고요

살펴보니깐 내부적으로 react, 타입스크립트, next.js, Intersection Observer 등등이 잘 되어있어서 사용하기 편하네요

그리고.. 무엇보다 커스텀애니메이션이 가능하네요

선생님 근데 Intersection Observer 이거하나 활용못해서 며칠씩이나 끙끙대다가 결국 찾아낸게 이런 라이브러리라니..

저 개발자로써 조금 실망스러운 부분일까요?..

[codingapple]

애니메이션 넣기에 리액트는 쓰레기같아서 직접만들다가 잘 안되면 그냥 라이브러리 찾아씁니다

[정중식]

감사합니다!

[글쓴이]

글