[React 기초] 버튼 클릭 시 원하는 문자 출력

리액트

[React 기초] 버튼 클릭 시 원하는 문자 출력

코딩하는둥이 2023. 1. 2. 10:34

1. class

- 거의 안 쓰이는데 ErrorBoundory에서 사용

class LikeButton extends React.Component{

}

button 클릭 시 You liked this 나옴

<html>
<head>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>-->
<script type="text/babel">
  'use strict';

  class LikeButton extends React.Component {
    constructor(props) {
      super(props);
      this.state = {liked: false}; //state는 화면에서 달라져야하는 부분
    }

    render() {
      if (this.state.liked) {
        return 'You liked this.'; //return 화면을 그리는 곳
      }
      // return React.createElement('button', {onClick() => this.setState({liked:true})}, 'Like');
      return (
         // 객체를 바꾸지 말고, 복사해라 -> setState을 사용하면 됨
        <button onClick={() => this.setState({liked: true})}>
          Like
        </button>
      );
    }
  }
</script>
<script type="text/babel">
    // LikeButton 만든 컴퍼런스를  root 안에 그려라
    // ReactDOM.render(<LikeButton/>, document.querySelector('#root')); // react 17버전 코드 -> 17버전도 되긴하지만, 17버전으로 인식해서 실행이 안될 수도 있음
    ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton/>); // react 18버전 코드
</script>
</body>
</html>

2. 함수

const LikeButton = () => {};
	function LikeButton() {};

<html>
<head>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>-->
<script type="text/babel">
  'use strict';

    function LikeButton(){
        const [liked, setLiked] = React.useState(false);
        if(liked){
            return 'You liked this.';
        }
        return(
            <button onClick={() =>{setLiked(true); }}>Like</button>

        );
    }

</script>
<script type="text/babel">
  ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton/>); 
</script>
</body>
</html>