Q&A
HOME >> 커뮤니티 >> Q&A

[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 을 이용해 해결할 수 있다.이제 잘 나온다.​최종 코딩​​끝.

링크변환

댓글목록

등록된 댓글이 없습니다.

상호명 신성사 | 대표자 박한규 | 사업자등록번호 106-50-64457 | TEL 02-713 –3691 | FAX 02 - 716 - 8564 | ADD 서울특별시 용산구 원효로58길 17 나우빌딩 2층 | E-mail help@sscom.co.kr

Copyrightsⓒ2016 신성사 All rights reserved.