JSX

class 는 잘 안쓰지만 형태는 알아둘 것. ( 요즘은 함수 컴포넌트 씀 )

<script type="text/babel">
  'use strict';
 
  class LikeButton extends React.Component {
    constructor(props) {
      super(props);
      this.state = {liked: false};
    }
 
    render() {
      if (this.state.liked) {
        return 'You liked this.';
      }
 
      return (
        <button onClick={() => this.setState({liked: true})}>
          Like
        </button>
      );
    }
  }
</script>
 

 

 

function 

const LikeButton = () => {
    const [liked, setLiked] = React.useState(false);  
    //구조분해 첫번째 state , 두번째 state를 set 하는 함수 / set로 제공
      if (liked) {
        return 'You liked this.';
      }
 
      return (
        <button onClick={() => setLiked(true)}>
          Like
        </button>
      );
  }

 

잠깐 Arrow function ?

onClick Listener에 화살표 함수가 있어야하는 이유?

 

[react,javascript] 화살표 함수를 알아보자 (arrow function)

 

[React] 화살표 함수 이용하기

---

<script type="text/babel">
  ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton />)  //react 18 ver
  //ReactDOM.render(<LikeButton/>, document.querySelector('#root')); // react 17 ver
</script>
 

React 17 ver 코드도 사용할 수 있지만, 사용하게 된다면 React 17 ver으로 인식하여 18 ver의 코드를 사용할 수 없게됨.

 

 

html 태그는 소문자

component 는 대문자

문자열은 " " 

JavaScript는  { }

 

 

---

참고

https://www.inflearn.com/course/web-game-react/unit/21558?q=652854&category=questionDetail 

학습 페이지