REACT. UI Full Course | Netflix 클론 코딩 (2)

1. useRef를 활용

useRef는 useState와 다르게 리렌더링 하지 않고, 컴포넌트의 속성만 수정, 저장한다  

즉, 불필요한 렌더링을 막을 수 있다

 

이정도만 알고 넘어가자,

어짜피 자주 나와서 자주 반복하게 될거다

 

1. 클릭 시, handleClick 함수가 활용될 수 있도록 하자

<ArrowLeft onClick={() => handleClick("left")}/>

<ArrowRight onClick={() => handleClick("right")}/>

왼쪽이 ArrowLeft, 오른쪽이 ArrowRight이다 

저걸 누르면 왼쪽으로 이동하거나 오른쪽으로 이동해야 한다 (의도)

2. handleClick의 구성을 파헤쳐보자 

const listRef = useRef();

const handleClick = (direction) => {
  if (direction === "left") {
    listRef.current.style.transform = `translateX(230px)`;
  }
};

direction이라는 파라미터(매개변수)를 받아와서,

그거에 해당하는 if문을 실행시켜주면 된다

여기서 listRef는 저 컨테이너 하나라고 통째로 하나이고 그 안의 item의 너비가 230px정도 된다

 

여기서, 문제가 발생하는데, 한 ! 번 ! 밖 ! 에 ! 실 ! 행! 이! 안 ! 된 ! 다 !

 

왜냐하면 translateX(230px)에서 멈춰있기 때문이다!

2. 조금 더 섬세하게 다뤄주기

여러 번 실행 될 수 있도록 조금 더 손을 대준다

const handleClick = (direction) => {
  let distance = listRef.current.getBoundingClientRect().x - 50;
  if (direction === "left") {
    listRef.current.style.transform = `translateX(${230 + distance}px)`;
  }
};

getBoundingClientReact 스킬을 발동!

저 컨테이너(listRef)의 x축 좌표를 구해서 거기에 마진 값을 뺀 값을 계속 빼준다

 

transalteX(230px) -> transalteX(460px) -> transalteX(690px) -> transalteX(920px)... 이런 식으로 늘어나게 해 준다

 

이젠 여러번 누를 수 있다!

 

이렇게 right도 해 준다

 

+ 컴퓨터 속도가 너무 빨라 transform되는 속도를 눈이 따라가지 못한다

transition: all 1s ease; 이런 효과를 줘서 천천히 움직이도록 해주면 더욱 자연스럽고 고급스러운 효과를 낼 수 있다

 

여기서 또 문제가 발생하는데...

item이 10개가 있다고 치면...

10번까지 이동하고나면 11번이 없어서 빈 공간이 나온다

 

그래서 10번까지만 보여주자!(ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ)

3. slide에 Number을 붙여주자(useState 활용)

const [slideNumber, setSlideNumber] = useState(0);

  if (direction === "left" && slideNumber > 0) {
    setSlideNumber(slideNumber - 1);
    listRef.current.style.transform = `translateX(${230 + distance}px)`;
  }
  if (direction === "right" && slideNumber < 5) {
    setSlideNumber(slideNumber + 1);
    listRef.current.style.transform = `translateX(${-230 + distance}px)`;
  }
};

&& 연산자를 활용하여, slideNumber이 0 밑으로 내려가지 않고 또 5이상이 되지 않도록 해준다

 

(이 글을 읽는 모든 사람이 이 방안이 임시방편임을 알지만, 그래도 넘어가자)