From: newton-cheongna Date: Tue, 23 Apr 2024 09:59:03 +0000 (+0900) Subject: 리액트 X-Git-Url: https://git.insang.kr/gitweb/?a=commitdiff_plain;h=4a2c008bba390bb974b0ce2c128ee8463b5b7fa8;p=back_nicezip_fastapi.git 리액트 --- 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