React - useRef()

useRef()

useRef란 React에서 제공하는 hook 중에 하나이며
DOM에 접근 할 수 있도록 하는 기능을 가진 hook이라고 보면 된다.

사용방법

import React, { useRef } from 'react';

1. React에서 제공을 해주는 hook이기 때문에
   컴포넌트 최상단에 react와 같이 import를 합니다.

2. 컴포넌트 내 상단에 useRef( )선언
   ex) const slideRef = useRef();

  const slideRef = useRef();

3. DOM에 접근 할 태그 및 컴포넌트에 ref 선언

<CardWrap ref={slideRef}>
   <Card/>
</CardWrap>

전체코드 사용예시

import React, { useState, useRef } from 'react';
import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
import { SLIDE_CARD_DATA } from './SlideCardData';

const Slide = () => {
  const IMAGE = 1084;
  const IMAGE_SMALL = 1030;
  const slideRef = useRef();
  const [index, setIndex] = useState(0);

  const prevIsCardHandler = () => {
    if (index === 0) {
      return;
    }
    if (slideRef.current.scrollWidth === 8500) {
      setIndex(prev => prev - 1);
      slideRef.current.style.transform = `translateX(-${
        IMAGE_SMALL * (index - 1)
      }px)`;
    } else {
      setIndex(prev => prev - 1);
      slideRef.current.style.transform = `translateX(-${
        IMAGE * (index - 1)
      }px)`;
    }
  };

  const nextIsCardHandler = () => {
    if (SLIDE_CARD_DATA.length - 1 === index) {
      return;
    }
    if (slideRef.current.scrollWidth === 8500) {
      setIndex(prev => prev + 1);
      slideRef.current.style.transform = `translateX(-${
        IMAGE_SMALL * (index + 1)
      }px)`;
    } else {
      setIndex(prev => prev + 1);
      slideRef.current.style.transform = `translateX(-${
        IMAGE * (index + 1)
      }px)`;
    }
  };

  return (
    <>
      <SlideContainer>
        <CardWrap ref={slideRef}>
          {SLIDE_CARD_DATA.map(data => {
            return (
              <Card
                key={data.id}
                style={{ backgroundImage: `url(${data.src})` }}
              />
            );
          })}
        </CardWrap>
      </SlideContainer>

      <ArrowContainer>
        <ArrowWrap>
          <PrevArrow onClick={prevIsCardHandler} />
        </ArrowWrap>
        <ArrowWrap>
          <NextArrow onClick={nextIsCardHandler} />
        </ArrowWrap>
      </ArrowContainer>
    </>
  );
};

export default Slide;