텍스트에서 일치하는 문자 자동으로 링크 걸어주기

긴 텍스트들에서 원하는 문자열을 자동으로 링크를 거는게 필요했다.

제목과 설명으로 된 객체들이 반복되는 배열에서 설명글에 제목이랑 같은 텍스트가 있으면 해당 글로 라우팅되는 기능을 구현하고 싶었다.

 

일단 배열들을 반복을 돌면서 제목들을 하나 하나 비교했다.

const docList = [{title: "제목1", desc: "설명1"}, {title: "제목2", desc: "제목1이 들어가는 설명2"}, …]
// 이런 배열이 있다고 할 때

const desc = "제목1이 들어가기도 하고 제목2가 들어가기도 하는 설명"

// desc에서 title과 같은 문자는 링크가 되도록 하고 싶었다.
// 정규 표현식으로 일치하는 것을 링크로 변경했다.
docList.forEach((doc)=>{
	// 처음에는 정규표현식에 변수를 넣고 싶으면 new RegExp를 쓰면 된다고해서
    const regex = new RegExp(doc.title, "g")
    if(desc.match(regex) !== null ) {
    	desc = desc.replace(regex, `<a href="이동할 경로">{doc.title}</a>`);
        // 이런식으로 짜니 desc에 제목10이 들어가면 제목1에 정규표현식이 걸려서 제목1에 링크가 걸리게 되고,
        // a 태그로 했더니 이동 시 새로고침이 되는 문제가 있었다.
    }
    //////////////////////////////////////////////////////////////
    const regex = new RegExp(`${doc.title}(?!\\d)`,"g")
    // 부정앞쪽 일치를 통해 해당 타이틀 뒤에 숫자가 나오는 것을 걸러냈다.
    // 이렇게 하니 제목10에 제목1이 걸리지 않고 제목10만 걸리게 됐다.
    // 그다음 a 태그를 span 태그로 바꾸고 span태그의 onclick에 navigate로 이동시키는 함수를 추가했다.
})

// 이렇게 하니 제목이 포함 된 텍스트들은 자동으로 이동이 가능한 span 태그로 바꿀 수 있었다.

return (
	<div dangerouslySetInnerHTML={{ __html: desc }}></div>
)

// 리액트에서는 dangerouslySetInnerHTML을 써서 태그로 변경시켜 준다고 한다.
// 바로 <Link></Link> 를 넣어서 새로고침 없이 이동 시키고 싶었지만 방법을 모르겠다.

💡 혹시 <Link> 태그를 넣는 법을 아시는 분은 알려주시면 감사하겠습니다.