From fcc498798ede2f687eed691ad193a7b0faac48db Mon Sep 17 00:00:00 2001 From: newton-cn Date: Tue, 23 Apr 2024 18:56:31 +0900 Subject: [PATCH] react --- static/js/Mybutton.js | 14 ++++++++++++++ templates/main/index.html | 32 +++++++++++--------------------- 2 files changed, 25 insertions(+), 21 deletions(-) create mode 100644 static/js/Mybutton.js diff --git a/static/js/Mybutton.js b/static/js/Mybutton.js new file mode 100644 index 0000000..5545ac7 --- /dev/null +++ b/static/js/Mybutton.js @@ -0,0 +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'); +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 86998d1..aab461d 100644 --- a/templates/main/index.html +++ b/templates/main/index.html @@ -1,27 +1,17 @@ - - -
-

{{ message }}

-
+

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

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