react icon 같은 ext provider service import 후, 적용하기 까지.

때로는 원초적인 낮은 단계의 것에서 그 해답을 찾을 수 있다. 라는 말이 있다면, 여기에 어울리는 말 일 겁니다.

 

react icon 같은 걸 import 한 건 좋은데, 도무지 저걸 어떻게 적용할까? 라는 이상한 고뇌에 잠시 빠졌었습니다.

그렇게 앓던 중, 한번 시험삼아 원초적인 방식으로 html 로 작성하듯이 접근 해 봤는데 해결이 된 사례입니다.

 

아래의 import { GrCheckbox } from 'react-icons/gr' 이 후,

아래의 p 태그 이후에 적히는 {} 내부에 그대로 <GrCheckbox /> 가 입력됩니다.

import React, { useState } from 'react'
import './App.css'
import { GrCheckbox }  from 'react-icons/gr'
import { GrCheckboxSelected } from 'react-icons/gr' 

function Example() {
    const [count, setCount] = useState(0)
    return (
         <div>
             <p>Clicked {<GrCheckbox />} times</p>
             <button onClick={() => setCount(count + 1)}>
                 Click me
             </button>
        </div>
    )
 }

export default Example

실수해도 괜찮습니다.

그래도 덕분에, 디버깅 작업이 더 수월해졌다고 볼 수 있으니까요.