React 란??
메타에서 개발한 오픈소스 자바스크립트 라이브러리이다. 랜더링이 잦은 동적인 모던 웹에서 빠른 퍼포먼스를 낼 수 있도록 한다.
연동
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내 블로그</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>내 블로그에 오신 분들 환영합니다.</h1>
<div id="root"></div>
<!-- 리액트 가져오기 -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- 리액트 컴포넌트 가져오기-->
<script src="MyButton.js"></script>
</body>
</html>
우선 HTML에 다음과 같이 작성한다. root div 태그는 domContainer 역할을 한다. 리액트를 가져오고 리액트 컴포넌트를 가져온다.
// 리액트 컴포넌트
// 간단한 리액트의 함수 컴포넌트
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
'button',
{ onClick: () => setIsClicked(true) },
isClicked ? 'Clicked!' : 'Click here!'
)
}
// 리액트 컴포넌트를 DOM 컴포넌트에 랜더링, 컴포넌트를 화면에 보여지게 함
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);
자바스크립트로 작성한 리액트 컴포넌트이다. 간단하게 작성 후, DOM 컴포넌트에 랜더링해서 화면에 보여지게 할 것이다.
DOM 컴포넌트에 랜더링 하면 다음과 같은 버튼이 생기는데, 클릭하면 'Clicked!' 로 버튼 이름이 변한다.
'React' 카테고리의 다른 글
| [React] State and Lifecycle (0) | 2024.08.03 |
|---|---|
| [React] Components 와 Props (0) | 2024.08.01 |
| [React] Rendering Elements (0) | 2024.07.31 |
| [React] JSX 의 장점과 사용법 (0) | 2024.07.30 |
| [React] create-react-app (0) | 2024.07.29 |