Studying/React
리액트 공부하기 - 리액트 아이콘 라이브러리
creamymood
2025. 5. 29. 20:51
동기분의 소개로, 곧 한번 해봐야지 했던 아이콘 사용!
아주 단순하고 쉽다 ! 자주 활용해야지 :)
React Icons
react-icons.github.io
리액트 아이콘 라이브러리
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() 사용 가능