Codepen에서 React 템플릿 사용하기

October 25, 2022

리액트 프로젝트를 사용하기 위해서는 로컬환경에 node.js를 설치해야하고 프로젝트 폴더를 만들어 npx create-react-app 으로 프로젝트를 만들어 시작을 합니다.

하지만 간단한 예제 연습이나 테스트를 할 때에도 로컬에 프로젝트를 만들어 사용하기에는 비효율적입니다.

온라인 IDE 인 codepen 을 이용하여 간단하게 개발을 할 수 있습니다.

codepen에서 리액트를 프로젝트 템플릿을 만들어 간편하게 사용하는 법에 대해 포스팅해 보겠습니다! 😁

✅ 1. 코드펜 가입 / 로그인 후 Pen 생성

사이드바의 create의 Pen을 클릭하여 새 Pen을 생성합니다.

Pen이 생성되었으면 우측 상단의 Setting버튼을 클릭합니다.

좌측 사이드바에 JS 탭으로 이동합니다.

Javascript Preprocessor를 Babel로 설정합니다.

Javascript Preprocessor 하단의 Add External Scripts/Pens 검색창에 react를 검색하여 react와 react-dom을 추가합니다.

그럼 두개의 CDN이 추가됩니다!

하단의 Save & Close 버튼을 클릭해 설정을 저장합니다.

html 에 <div id="root"></div> 를 작성합니다.

JS에 아래와 같이 작성합니다.

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <div>Hello World!</div>
);

위와 같이 하단에 라이브 뷰가 나타나게 됩니다.

해당 Pen을 템플릿으로 저장합니다.

우측 상단의 Save 버튼의 화살표를 클릭하면 옵션창이 드롭다운됩니다.

Template 토글을 On하여 Pen을 템플릿으로 저장할 수 있습니다.

Settings의 Template 탭에서도 저장할 수 있으며 Template URL을 복사할 수 있습니다.

코드펜 홈화면 우측 사이드바에 Pen > FromTemplate 을 클릭하면 템플릿이 저장되어있습니다.

템플릿을 오픈할 때 마다 리액트 프로젝트로 새로운 Pen이 생겨 간편하게 코딩할 수 있습니다!

코드펜에서 리액트 템플릿을 만들고 사용하는 법에 대해 알아봤습니다!

그럼 이만..총총총