기존에 사용하는 PHP 프로젝트에 리액트(React)를 빠르게 적용하는 방법을 알아보겠습니다. 이미 모든 파일이 PHP 파일로 사용 중이어서, 여기에 리액트(React)를 찾아보다가 CDN을 이용해 빠르게 적용하는 방법을 찾았습니다. 그 부분에 대해서 자세히 알아보겠습니다.
HTML에 CDN 설정하기
리액트(React)를 통해 사용하는 방법은 간단하고 빠르게 기존 프로젝트에 리액트(React)를 적용할 수 있는 방법입니다. 특히 작은 프로젝트나 간단한 프로젝트에 유용하다고 생각됩니다.
먼저 HTML <head> 사이에 ReactDOM과 JSX CDN을 추가해 주면 됩니다.
아래 CDN은 개발용으로 사용하는 CDN입니다. 해당 CDN은 ReactJS 문서 사이트에서 확인이 가능합니다.
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
아래 CDN은 배보용으로 사용하는 CDN입니다. 해당 CDN은 ReactJS 문서 사이트에서 확인이 가능합니다.
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
위 CDN 링크에서 react@18, react-dom@18 에서 18은 버전으로 적용 시에 원하시는 버전의 숫자로 변경해서 사용이 가능합니다.
이 문서를 참고한 사이트(legacy.reactjs.org)는 이제 더 이상 업데이트가 되지 않습니다. 리액트(React) 관련 최신 정보를 확인하시려면, react.dev 사이트를 이용하시면 될 거 같습니다.
HTML에 리액트(React) 적용하기
HTML에 리액트(React)를 사용하는 간단한 코드를 작성해서 알아보겠습니다.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- 리액트와 리액트 돔 CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- BABEL JSX CDN -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="global"></div>
<script type="text/babel">
// 리액트 컴포넌트 작성
const App = () => {
return (
<h1>리액트 사용하기</h1>
<p>기존 프로젝트에 리액트 사용하기 위한 CDN 설정</p>
);
};
// 리액트 랜더링
ReactDOM.render(<App />, document.getElementById('global'));
</script>
</body>
</html>
위 예제 코드에서 <head> 사이에 리액트를 사용하기 위한 CDN을 설정해 줍니다. 설정한 CDN은 리액트, 리액트 돔, BABEL JSX입니다. <div>에 id를 지정하고, 지정한 id에 리액트 컴포넌트를 랜더링 해서 보여주는 방식으로 아주 간단한 예제 코드입니다.
PHP 기존 코드에 리액트(React)를 적용한 간단한 예제
기존 프로젝트에 PHP에서 상단, 하단 HTML 영역을 별도 파일로 분리 후 include 해서 사용한다고 가정해 보겠습니다.
// 파일명 : head.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- 리액트와 리액트 돔 CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- BABEL JSX CDN -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>// 파일명 : foot.php
</body>
</html>// 파일명 : main.php
<?php
include("./head.php");
?>
내용
<?php
include("./foot.php");
상단 head.php, 하단 foot.php로 만든 다음 main.php에서 include를 사용해서 상단, 하단을 호출합니다. 이때 리액트가 들어가야 할 파일은 main.php로 하겠습니다. main.php 코드에 내용 부분에 리액트 코드를 넣어서 사용하면 될 거 같습니다.
마무리
이번에는 PHP 기존 프로젝트에 리액트(React)를 사용하기 위해 어떤 설정을 하면 되는지 알아봤습니다. 생각보다 간단한 설정으로 리액트(React) 사용이 가능해서 좋았습니다. 기존 PHP 프로젝트가 여러 가지의 페이지들이 있지만, 간단한 코드부터 리액트(React)를 적용하면서 정보를 공유하도록 하겠습니다.
PHP + 리액트(React) 개발 시 좋은 점
기존에 PHP로 개발을 많이 하는 편이었는데, Vue를 접하면서 PHP를 백엔드로 하고 프론트엔드에 동적 기능을 개발하는 언어는 없을까 찾다가 리액트(React)를 알게 되면서, PHP와 리액트(React) 결합으
iblogger.tistory.com
리액트(React) 개발 장점 및 웹 사이트 유형
이번 시간에는 리액트(React)로 웹 서비스 개발할 때의 장점을 알아보고, 특히 리액트(React)를 이용해서 어떤 유형의 웹 서비스를 개발하면 좋은지에 대해서 알아보도록 하겠습니다. 리액트의 장
iblogger.tistory.com
리액트(React) 동적 웹 서비스 개발
리액트(React)는 페이스북에서 개발한 오픈 소스 자바스크립트(JavaScript) 라이브러리입니다. 사용자 UI를 구축하는 데 유용하게 사용되고 있습니다. 이번 시간은 리액트(React)에 대해서 알아보겠습
iblogger.tistory.com
'웹이야기' 카테고리의 다른 글
| JavaScript 깔끔한 모달창 SweetAlert2 세팅 방법 (0) | 2025.01.07 |
|---|---|
| PHP + 리액트(React) 개발 시 좋은 점 (0) | 2024.11.21 |
| 리액트(React) 개발 장점 및 웹 사이트 유형 (0) | 2024.11.20 |
| 리액트(React) 동적 웹 서비스 개발 (0) | 2024.11.19 |
| MySQL 문자열 검색 FULLTEXT INDEX 사용법 (0) | 2024.11.11 |
