[REACT] 해시태그가 포함된 내용에 해시태그를 이동되는 버튼으로 만들기

놀러왔음~ #나들이 #여행

이런 내용이 있을 때 #나들이, #여행 을 각각 이동가능한 해시태그로 바꾸어주려면 어떻게 하면 될까??

아래 코드를 참고하자.

const PostCardContent = ({ postData }) => (
    <div>
        {postData.split(/(#[^\s#]+)/g).map((v, i) => {
            if (v.match(/(#[^\s#]+)/g)) {
                return (
                    <Link href={`/hashtag/${v.slice(1)}`} key={i}>
                        <a>{v}</a>
                    </Link>
                )
            }
            return v
        })}
    </div>
)

 

여기서 postData 파라미터가 '놀러왔음~ #나들이 #여행' <<이 문구이다.

이걸 정규식을 사용해 해시태그 뒤에 있는 글씨까지 잘라주는 정규식을 섞으면

['놀러왔음~',' ', '#나들이', ' ', '#여행'] 배열이 된다.

 

위 배열에서 해시태그쪽 글씨만 가져올 때는 아래 if문을 짜면 될 것이다.

if(v.match(/(#[^\s#]+)/g)

 

그리고 저 if문에 걸리는 객체의 경우 클릭 시 이동될 화면의 경로를 정의해주면 된다.