리액트로 간단한 실습
설치할 확장프로그램
visual studio code에서 다음 위의 프로그램을 깔아줍니다.
이 프로그램은 html같은 파일을 코드를 통해 브라우저로 열 수 있게 해줍니다.
만들기
html, css, js 확장자를 이용해서 만듭니다.
index.html만들기
<html>
<head>
<title>리액트 시작하기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>리액트 개발을 시작하신 여러분 환영합니다.</h1>
<div id="root"></div>
<!-- React 라이브러리를 로드-->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- ReactDOM 라이브러리를 로드. 이 라이브러리는 React 컴포넌트를 웹 페이지에 렌더링하는데 사용됩니다-->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- MyButton.js라는 자바스크립트 파일을 로드. 이 파일 안에 있는 코드가 실행됩니다-->
<script src="MyButton.js"></script>
</body>
</html>
style.css
h1{
color : green;
font-style: italic;
}
MyButton.js
// MyButton이라는 함수형 컴포넌트를 정의합니다.
function MyButton(props) {
// React의 useState 훅을 사용하여 isClicked라는 상태변수와 그 값을 변경하는 SetIsClicked 함수를 선언합니다.
// 초기값은 false입니다.
const [isClicked, SetIsClicked] = React.useState(false);
// 컴포넌트가 렌더링할 내용을 반환합니다. 여기서는 'button' 요소를 생성하며,
// onClick 이벤트 핸들러로 클릭 시 isClicked 상태를 true로 변경하는 함수를 지정하고,
// 버튼의 텍스트로 isClicked 상태에 따라 'Click here!' 또는 'Clicked!'를 표시합니다.
return React.createElement(
'button',
{onClick: () => SetIsClicked(true)},
isClicked ? 'Clicked!' : 'Click here!'
)
}
// HTML 문서에서 id가 'root'인 요소(즉, div#root)를 찾아 domContainer 변수에 할당합니다.
const domContainer = document.querySelector('#root');
// ReactDOM.createRoot 함수를 사용하여 리액트 루트(root) 객체를 생성하고 root 변수에 할당합니다.
const root = ReactDOM.createRoot(domContainer);
// root.render 메소드로 MyButton 컴포넌트(React.createElement(MyButton)) 를 렌더링 합니다.
// 이렇게 하면, 웹 페이지에서 id가 'root'인 div 요소 내부에 MyButton 컴포넌트의 출력 결과가 나타납니다.
root.render(React.createElement(MyButton));
댓글남기기