NextJS에서 mouse hover시 특정 텍스트 변경

마우스 호버 시 특정 텍스트 보여주기

Next.js 환경에서 했던 것이니 Next 태그를 넣긴 했지만 이 녀석은 거진 React..
회사 프로젝트를 진행하다가 어려웠던 부분이 있었는데 그거를 집에서 혼자 해보고 싶었습니다.. 주절주절..😑

우선 화면에 보이지 않으면 내가 답답하기 때문에 퍼블리싱부터 빠르게 해주었습니다.

export default function Hover() {
  return (
    <div className='flex flex-col items-center'>
      <div className='text-3xl font-bold pb-10'>1번을 호버 시 나타나는 텍스트입니다.</div>
      <div className="flex">
        <div className='p-10 bg-blackDefault text-white text-lg'>1번 호버</div>
        <div className='p-10 bg-blackDefault text-white text-lg'>2번 호버</div>
        <div className='p-10 bg-blackDefault text-white text-lg'>3번 호버</div>
        <div className='p-10 bg-blackDefault text-white text-lg'>4번 호버</div>
      </div>
    </div>
  );
}

 

저는 Next.js 환경에서 Tailwind CSS와 TypeScript를 사용하고 있습니다.

매우 간단한 퍼블리싱을 마치고 이후에는 반복되는 요소를 map을 이용하여 맵핑해야겠다고 생각했습니다. 왜냐구요?..그렇게 해야 깔끔한 코드라고 합니다.

 

추가적으로 기능과 페이지를 나누라는 말도 듣긴했는데.. 음 우선은 모르겠다.

 

Interface 설정

interface HoverTextProps {
  text: string;
  isHover: string;
}

const hoverText: HoverTextProps[] = [
  {
    text: '1번 호버',
    isHover: '1번을 호버 시 나타나는 텍스트입니다.',
  },
  {
    text: '2번 호버',
    isHover: '2번을 호버 시 나타나는 텍스트입니다.',
  },
  {
    text: '3번 호버',
    isHover: '3번을 호버 시 나타나는 텍스트입니다.',
  }
]

 

HoverTextProps라는 인터페이스를 정의해줍니다. HoverTextProps에는 text, isHover가 정의되어 있는데 둘다 문자열로 정의하였습니다.

 

hoverText라는 배열을 정의해줍니다. text는 기본 텍스트, isHover는 호버할 때 보여질 텍스트를 정의하였습니다.

 

반복 요소 맵핑

export default function Hover() {
  return (
    <div className='flex flex-col items-center'>
      <div className='text-3xl font-bold pb-10'>1번을 호버 시 나타나는 텍스트입니다.</div>
      <div className='flex'>
        {hoverText.map((hover: HoverTextProps, index: number) => (
          <div 
            key={index}
            className='p-10 bg-blackDefault text-white text-lg cursor-pointer'>
            {hover.text}
          </div>
        ))}
      </div>
    </div>
  );
}

 

텍스트 박스 부분을 map을 이용하여 맵핑을 시켜줍니다. 이때 타입스크립트 오류가 발생하는데 hover와 index에 타입을 지정해주면 오류가 발생하지 않습니다. 추가로 반복되는 요소에 key값을 추가해주었습니다.

 

호버 시 나타나는 텍스트는 호버 박스 index 값을 가져와서 호버한 박스의 index값에 해당하는 isHover의 텍스트를 뿌려주어야 하기 때문에 이 요소는 맵핑 안에 들어가면 안 되기에 빼주었습니다.

상태 관리할 useState 정의하기

'use client'
import { useState } from 'react';

 

최상단에 use client를 선언해주고 useState를(index 상태 관리를 위함) import해줍니다.

이후에 index 가져오는 hoverTextIndex 상태를 정의해줍니다.

const [hoverTextIndex, setHoverTextIndex] = useState<number | null>(null);

 

기본값을 null로 선언하고 number 또는 null 값으로 타입을 지정해줍니다.

 

박스에 마우스 이벤트 추가하기

<div 
  key={index}
  onMouseEnter={ () => setHoverTextIndex(index) }
  onMouseLeave={ () => setHoverTextIndex(null) }
  className='p-10 bg-blackDefault text-white text-lg cursor-pointer'>
  {hover.text}
</div>

 

hover.text에 마우스 호버시에 함수를 적용해줍니다. onMouseEnter와 onMouseLeave를 정의해줍니다.

onMouseEnter,  onMouseLeave : 오직 해당 요소에서만 마우스 이벤트를 처리합니다.

onMouseOver,  onMouseOut: 요소 내의 자식 요소 위로 마우스가 이동해도 마우스 이벤트를 처리합니다.

 

박스의 Index 값 가져오기

<div className='text-3xl font-bold pb-10'>
  {hoverTextIndex !== null ? hoverText[hoverTextIndex].isHover : '마우스를 올려보세요!'}
</div>

 

이제 호버한 박스의 index 값을 가져와서 해당하는 isHover 텍스트를 출력해주었습니다.

 

상태 관리 중인 hoverTextIndex 값이 null 값이 아닐 경우에 hoverText[hoverTextIndex]를 해줘서 해당하는 index에 찾아가도록 해줍니다. 이후에 isHover를 출력 해주고 hoverTextIndex 값이 null일 경우에는 '마우스를 올려보세요!'를 출력하도록 해주었습니다.

 

추가로 background-color의 색상 코드를 HoverTextProps에 정의하여 요소마다 배경 색상이 달라지도록 설정하였습니다.

전체 코드는 다음과 같습니다.

'use client'

import { useState } from 'react';

interface HoverTextProps {
  text: string;
  isHover: string;
  bgColor: string;
}

const hoverText: HoverTextProps[] = [
  {
    text: '1번 호버',
    isHover: '1번을 호버 시 나타나는 텍스트입니다.',
    bgColor: '#ff6060'
  },
  {
    text: '2번 호버',
    isHover: '2번을 호버 시 나타나는 텍스트입니다.',
    bgColor: '#6bc16b'
  },
  {
    text: '3번 호버',
    isHover: '3번을 호버 시 나타나는 텍스트입니다.',
    bgColor: '#6a6aff'
  }
]

export default function Service() {
  const [hoverTextIndex, setHoverTextIndex] = useState<number | null>(null);

  return (
    <div className='flex flex-col items-center'>
      <div className='text-3xl font-bold pb-10'>
        {hoverTextIndex !== null ? hoverText[hoverTextIndex].isHover : '마우스를 올려보세요!'}
      </div>
      <div className='flex'>
        {hoverText.map((hover: HoverTextProps, index: number) => (
          <div
            key={index}
            onMouseEnter={ () => setHoverTextIndex(index) }
            onMouseLeave={ () => setHoverTextIndex(null) }
            className='p-10 text-white text-lg cursor-pointer'
            style={{ backgroundColor: `${hover.bgColor}` }}
            >
            {hover.text}
          </div>
        ))}
      </div>
    </div>
  );
}

 

굉장히 쉬운 코드이지만 나에게는 어려운..😂😂