From 4a2c008bba390bb974b0ce2c128ee8463b5b7fa8 Mon Sep 17 00:00:00 2001 From: newton-cheongna Date: Tue, 23 Apr 2024 18:59:03 +0900 Subject: [PATCH] =?utf8?q?=EB=A6=AC=EC=95=A1=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- static/js/Mybutton.js | 26 +++++++++++++------------- templates/main/index.html | 33 +++++++++++++++++---------------- 2 files changed, 30 insertions(+), 29 deletions(-) diff --git a/static/js/Mybutton.js b/static/js/Mybutton.js index 5545ac7..7d15167 100644 --- a/static/js/Mybutton.js +++ b/static/js/Mybutton.js @@ -1,14 +1,14 @@ -function Mybutton(props) { - const [isClicked, setIsClicked] = React.useState(false); - - return React.createElement( - 'button', - { onClick: () => setIsClicked(true) }, - isClicked ? 'Clicked!' : 'Click here!' - ) -}//리액트의 함수 컴포넌트 - -//리액트 돔에 render 함수를 사용해서 리액트 컴포넌트를 돔 컨테이너에 렌더링하는 코드 -//이 코드가 필요한 이유->스크립트 태그를 사용해서 컴포넌트를 가져왔다고 해도, 컴포넌트가 화면에 보이는 것이 아니기 때문에! -const domContainer = document.querySelector('#root'); +function Mybutton(props) { + const [isClicked, setIsClicked] = React.useState(false); + + return React.createElement( + 'button', + { onClick: () => setIsClicked(true) }, + isClicked ? 'Clicked!' : 'Click here!' + ) +}//리액트의 함수 컴포넌트 + +//리액트 돔에 render 함수를 사용해서 리액트 컴포넌트를 돔 컨테이너에 렌더링하는 코드 +//이 코드가 필요한 이유->스크립트 태그를 사용해서 컴포넌트를 가져왔다고 해도, 컴포넌트가 화면에 보이는 것이 아니기 때문에! +const domContainer = document.querySelector('#root'); ReactDOM.render(React.createElement(Mybutton), domContainer); \ No newline at end of file diff --git a/templates/main/index.html b/templates/main/index.html index 6ae2128..acaa999 100644 --- a/templates/main/index.html +++ b/templates/main/index.html @@ -1,17 +1,18 @@ - - - - -

리액트를 사용하기 위한 사이트입니다.

- -
- - - - - - - - - + + + + +

리액트를 사용하기 위한 사이트입니다.

+ +
+ + + + + + + + + + \ No newline at end of file -- 2.43.0