[React] iframe 태그를 활용해 CodePen 코드 가져오기

React로 프로젝트를 진행하던 중 CodePen 사이트에서 괜찮은 코드를 참조하거나 가져오고 싶은 경우가 있다.

하지만 CodePen에 있는 대부분의 코드들은 html, JavaScript, CSS로 코드가 짜여져 있는 경우가 많아 React 프로젝트에 바로 적용하기는 어려움이 있다.

 

그래서 iframe 태그를 활용하여 CodePen의 코드들을 그대로 가져와 사용해보려고 한다.

 

 

<iframe> 태그

HTML <iframe> 요소는 중첩 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입한다. 즉, html안에 또다른 html을 넣을 수 있다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/iframe

 

적용하기

1. CodePen에서 사용하고자 하는 코드를 고른다.

2. 적용하려고 하는 프로젝트에 Html, CSS, JS 파일을 만들어준다.

3. 파일에 코드를 그대로 복사, 붙여넣기 한다.

컴포넌트처럼 폴더 안에 3가지 파일을 만들었다.

 

그리고 사용하려는 코드를 적용하려고 하는 부분에 iframe 태그를 사용하여 html을 불러올 수 있다.

src로 경로를 불러오면 된다.

이제는 어떻게 코드를 재사용할지 너무 막막해하지 않아도 된다...!

 

참고

CodePen에서 코드를 복사하기 전에 Settings에서 코드 스타일을 변경할 수 있다. 

필요한 경우 스타일에 맞게 코드를 변경 후 사용하면 된다.