[React] useRef로 Tab 구현하기

💡 시작하기

탭바를 구현해야 하는데, 탭바에 따라 렌더링되는 데이터를 달리하려면 useRef를 써야 한다고 한다. 그래서 좀 찾아보았다.

⚙️ useRef

useRef ? 처음에 제공한 초기값으로 설정된 단일 current 프로퍼티가 있는 ref 객체를 반환하는 hook

 

useRef의 가장 큰 특징은 리렌더링 없이 값을 저장한다는 점이다.
값이 업데이트 되어도 컴포넌트가 리렌더링되지 않고, 값만 메모리에 저장한다. → 훨씬 효율적임!!

 

현재 카페 키오스크를 구현하고 있는데,
메뉴의 종류마다 보이는 메뉴를 다르게 해야 하기 때문에 useRef를 사용하였다.

🖥️ 구현해보자!

1. 데이터 준비

우선 카페 메뉴 데이터는 다음과 같다.

 

↓ 카페 메뉴 데이터 cafe.js

const cafe = {
  coffee: [
    {
      image: Americano,
      name: "아메리카노",
      price: 1700,
      isSoldOut: false,
    },
    {
      image: coldBrew,
      name: "콜드브루",
      price: 2800,
      isSoldOut: false,
    },
  ],
  noncoffee: [
    {
      image: icedTea,
      name: "아이스티",
      price: 2100,
      isSoldOut: false,
    },
  ],
  dessert: [
    {
      image: saltBread,
      name: "소금빵",
      price: 5100,
      isSoldOut: false,
    },
    {
      image: bagel,
      name: "베이글",
      price: 6000,
      isSoldOut: false,
    },
  ],
  season: [
    {
      image: strawberryJuice,
      name: "딸기주스",
      price: 6000,
      isSoldOut: false,
    },
    {
      image: strawberryLatte,
      name: "딸기라떼",
      price: 7000,
      isSoldOut: false,
    },
    {
      image: chestnutLatte,
      name: "꿀밤라떼",
      price: 7500,
      isSoldOut: true,
    },
  ],
};

export default cafe;

탭은 커피 / 논커피 / 디저트 / 시즌메뉴 로 이루어져 있어, 각 요소로 나눈 뒤, 메뉴를 각 탭의 배열로 넣었다.

 

2. useRef를 통해 데이터 가져오기

우선 useRef를 통해 데이터를 가져온다.

const [choice, setChoice] = useState("coffee");
const cafeData = useRef(cafe.coffee);

커피에 해당되는 데이터들을 초기값으로 지정해주었다.

3. handleTabClick 함수 만들기

선택되는 탭에 따라 ref의 current 프로퍼티에 들어있는 값을 업데이트할 함수를 만든다.

 

우선 onClick 이벤트 핸들러를 사용하여 state를 업데이트해주고,

switch문을 통해 state의 값에 따라 current값을 달리 해주었다.

const handleTabClick = (tab) => {
    setChoice(tab);

    switch (tab) {
      case "coffee":
        cafeData.current = cafe.coffee;
        break;
      case "noncoffee":
        cafeData.current = cafe.noncoffee;
        break;
      case "dessert":
        cafeData.current = cafe.dessert;
        break;
      case "season":
        cafeData.current = cafe.season;
        break;
      default:
        cafeData.current = cafe.coffee;
    }
  };

 

4. 이벤트 적용하기

만든 함수를 각 section에 적용한다.

<S.TabBar choice={choice}>
  <section
    onClick={() => handleTabClick("coffee")}
  >
    커피
  </section>
  <section
    onClick={() => handleTabClick("noncoffee")}
  >
    논커피
  </section>
  <section
    onClick={() => handleTabClick("dessert")}
  >
    디저트
  </section>
  <section
    onClick={() => handleTabClick("season")}
  >
    시즌메뉴
  </section>
</S.TabBar>

5. 데이터 렌더링하기

바뀌는 데이터를 렌더링해준다!

<S.MenuBox>
  {cafeData.current.map((value, index) => {
    return (
      <S.Menu key={index}>
        <img src={value.image} />
        <h1>{value.name}</h1>
        <p>{value.price}원</p>
      </S.Menu>
    );
  })}
</S.MenuBox>

⭐️ 결과

 

🔗 참고

https://ko.react.dev/reference/react/useRef