[react] text 내 http에 a 태그로 변환, 링크 삽입
페이지 정보
작성자 Eavan 작성일24-12-10 04:46 조회10회 댓글0건관련링크
본문
다음처럼 링크변환 DB에 저장된 글이 있다고 해보자.이것을 react에서 다음과 같은 컴포넌트로 만들었었다.사용하는 곳이렇게 하면 다음처럼 코드가 링크변환 완성된다.그럼 이제 글 한줄마다 p 태그로 감싸야 한다. 그러지 않고 html에 노출하면 다음처럼 된다.이 링크변환 부분을 추가하기 위해 아래 코드를 추가한다.htmlArr 에서 보면 다음처럼 배열로 추가되어 있다.이제 이걸 html로 링크변환 랜더링해주면 된다. 일단 글을 그대로 보여주기 위해선 태그로 감싸야하는데, 여기서는 1줄씩 보여주는 것을 p태그로 링크변환 감쌌다. 그런데 이러다보면 다음과 브라우저에 적용된다이때 사용할 수 있는 것이 바로 dangerouslySetInnerHTML 옵션이다. 해당옵션은 링크변환 브라우저 Dom에 innerHtml을 사용할 수 있게 해준다. 상세 설명은 아래 링크를 참조한다.A JavaScript library 링크변환 for building user interfaces적용방법은 다음과 같다.그래서 응용해보면 다음과 같다.그런대 적용해보니 다음처럼 보이지 않던 콤마(,)가 링크변환 보인다. 배열이다보니 붙은 콤마다. 이것은 join 을 이용해 해결할 수 있다.이제 잘 나온다.최종 코딩끝.
링크변환댓글목록
등록된 댓글이 없습니다.