리액트 공부하기 - 리액트 아이콘 라이브러리

동기분의 소개로, 곧 한번 해봐야지 했던 아이콘 사용!

아주 단순하고 쉽다 ! 자주 활용해야지 :)

---

React Icons

리액트 아이콘 라이브러리

 

1. 설치

npm install react-icons

 

 

 

2. 사이트에서 원하는 아이콘을 선택 후 (커스터마이징도 쉽게 가능)

 

3. 사용할 컴포넌트 파일에서 import 해준다.

import { FaHeart } from "react-icons/fa";

 

4. 그 뒤, 컴포넌트 처럼 사용해주면 됌.

import { Faheart } from 'react-icons/fa';

function App() {
  return <h1>Let's go for a <Faheart />?</h1>;
}

 

---

* 공부한 부분 

예를 들어 Search에 관련되어 돋보기 아이콘을 사용해서, 그 아이콘을 버튼 처럼 활용하고 싶다면, 두가지 방법이 있는데 

 

1. 리액트 라우터 링크로 연결

2. onclick으로

 

자세한 설명은 다음과 같다.

예시 1:  onClick 달기

import { Search } from 'lucide-react'; // 예: lucide-react 아이콘 라이브러리

function MyComponent() {
  const handleClick = () => {
    console.log('아이콘 클릭됨!');
  };

  return <Search onClick={handleClick} />;
}

이렇게 하면 아이콘 누르면 handleClick 실행.

---

예시 2: Link와 함께 사용하기 (react-router-dom)

import { Search } from 'lucide-react';
import { Link } from 'react-router-dom';

function MyComponent() {
  return (
    <Link to="/detail">
      <Search className="cursor-pointer" />
    </Link>
  );
}

이 경우 Search 아이콘을 클릭하면 /detail로 이동해요.

---

 예시 3: onClick 안 먹힐 수도 있는 경우

간혹 어떤 아이콘 라이브러리는 SVG로만 구성되어 있어서 onClick이 바로 안 먹힐 수도 있다.
그럴 땐 div, button, 또는 span으로 감싸주면 된다.

function MyComponent() {
  const handleClick = () => {
    console.log('이동~');
  };

  return (
    <div onClick={handleClick} style={{ cursor: 'pointer' }}>
      <Search />
    </div>
  );
}

또는 라우터처럼 쓸 땐 이렇게도 가능하다

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  return (
    <div onClick={() => navigate('/detail')} style={{ cursor: 'pointer' }}>
      <Search />
    </div>
  );
}

---

🔑 정리

• 온클릭 안 될 경우 부모 요소에 onClick 걸고 스타일로 cursor: pointer 넣어주기
• 라우터 이동 시 <Link> 또는 useNavigate() 사용 가능