useNavigate hook으로 로고 타이틀 클릭하면 메인 화면으로 이동시키기

고려한 계기

사실 onClick 이벤트만 추가하면 전혀 어려운 기능 구현은 아니지만, 요즘 사용자들으 로고를 클릭하면 → 메인으로 이동한다는 암묵적인 느낌을 가지고 있다고 생각이 들어 이 기능을 추가하게 되었다.

이전 코드

// Before
import TitleStyle from './Title.style';
import { useNavigate } from 'react-router';

const Title = () => {
  const navigate = useNavigate();

  const handleTitle = () => {
    navigate('/');
  }

  return (
    <TitleStyle onClick={handleTitle}>
      🔀 랜덤 피커
    </TitleStyle>
  )
}

export default Title;
TypeScript
복사

수정한 코드

// After
import TitleStyle from './Title.style';
import { useNavigate } from 'react-router';

const Title = () => {
  const navigate = useNavigate();

  return (
    <TitleStyle onClick={() => navigate('/')}>
      🔀 랜덤 피커
    </TitleStyle>
  );
}

export default Title;
TypeScript
복사