Jieunny의 블로그

버튼 count 수 증가시키기 본문

React/Nomadcoders

버튼 count 수 증가시키기

Jieunny 2021. 11. 23. 12:17 
<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function App(){
            const [counter, setCounter] = React.useState(0); 
            const onClick = () => {
                setCounter((current) => current + 1); 
            };
            return(
                <div>
                    <h3>
                        Total clicks: {counter}
                    </h3>
                    <button onClick={onClick}>          
                        Click me
                    </button>
                </div>
            );
        }   
        ReactDOM .render(<App />, root);
   </script>
</html>

render : 사용자에게 보여준다.

useState(0) -> [0, f] 반환

0 : 초기값, f : 0을 변경할 함수

'React > Nomadcoders' 카테고리의 다른 글

Todo-list  (0) 2021.12.02
Clean up function  (0) 2021.12.02
useEffect  (0) 2021.12.02
Props  (0) 2021.11.29
Minutes to Hours / Km to Miles Converter  (0) 2021.11.25
'React/Nomadcoders' Related Articles more