티스토리 뷰

유튜브 강의

제로초 리액트 강의 1.1

2021bong 2021. 10. 30. 15:42 
<html>

<head>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <!--리액트를 사용할 수 있는 태그-->
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>

<body>
  <div id="root"></div> <!--아이디 root 추가-->
  <script>
    const e = React.createElement; // e 엘리먼트 생성

    class LikeButton extends React.Component {
      constructor(props) { // 객체지향에서는 중요하나 리액트에서는 걍 쓰는거라고 생각하면 됨
        super(props);
      }
      render () {
        return e('button', null, 'Like'); // <button>Like</button> 이 태그를 만들겠.다.
      }
    }
  </script>
  <script> 
    ReactDOM.render(e(LikeButton), document.querySelector('#root')); 

    // ReactDOM(대소문자 주의)이 우리가 작성한 코드를 렌더링해서 브라우저에 반영해줌. 이 태그를 만든.다.
    // 그래서 <div id="root"><button>Like</button></div>가 출력됨
  </script>
</body>

</html>
<html>

<head>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>

<body>
  <div id="root"></div>
  <script>
    const e = React.createElement;

    class LikeButton extends React.Component {
      constructor(props) {
        super(props);
      }
      render () {
        return e('button', {onClick: () => {console.log('clicked')}, type: 'submit'}, 'Like'); 
        // 두번째 인자로 html 속성 값을 넣어주면 됨 onClick 대문자주의
        // <button onclick="() => {console.log('clicked')}" type="submit">Like</button>
      }
    }
  </script>
  <script> 
    ReactDOM.render(e(LikeButton), document.querySelector('#root'));
  </script>
</body>

</html>

 

크롬 확장프로그램 설치 ! 리액트 개발자 도구

<html>

<head>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>

<body>
  <div id="root"></div>
  <script>
    const e = React.createElement;

    class LikeButton extends React.Component {
      constructor(props) {
        super(props);
        this.state = { // 변할 수 있는 상태 = state
          liked: false
        }
      }
      render () {
        return e(
          'button',
          {onClick: () => {this.setState({liked: true})}, type: 'submit'}, // state를 넣어줌
          this.state.liked === true ? 'Liked':'Like' // state값에 따라 버튼의 컨텐트를 변경
          // $('button').text('Liked') 코드 추가해주는 것과 같음
          // 작은 프로젝트는 이게 더 나아보이지만 프로젝트가 커지면 이 방법이 훨씬 낫다고 알게 됨
        );
    }
  </script>
  <script> 
    ReactDOM.render(e(LikeButton), document.querySelector('#root'));
  </script>
</body>

</html>

 

그렇지만 이렇게 쓰면 엘리먼트 생성해주고... 또 렌더함수에 구구절절 써주고... 너무 불편하기 때문에 태그 형식을 취하게 됨

<html>

<head>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>

<body>
  <div id="root"></div>

  <script>
    class LikeButton extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          liked: false
        }
      }
      render() {
        return <button type="submit" onClick={()=>{this.setState({liked:true})}}></button>
        // e('button', { onClick: () => { this.setState({ liked: true })}, type: 'submit' }, this.state.liked === true ? 'Liked' : 'Like');
        // 이렇게 쓰면 너무 불편해서 html과 비슷하게 쓰게 됨
      }
    }
  </script>

  <script>
    ReactDOM.render(<LikeButton />, document.querySelector('#root'));
    // 여기도 html 태그처럼
  </script>
</body>

</html>

 

 

하지만 자바스크립트에서 html처럼 쓴다? 불가능 하기 때문에 이걸 가능하게 문법을 바꿔주는 babel을 사용

메소드나 객체는 다른걸 추가로 더 설치해야함

이걸 JSX라고 부름 Javascript + XML 그래서 닫는 태그를 꼭 해줘야함 <LikeButton />

<html>

<head>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!--script 추가-->
</head>

<body>
  <div id="root"></div>

  <script type="text/babel"> // type 추가
    class LikeButton extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          liked: false
        }
      }
      render() {
        return <button type="submit" onClick={()=>{this.setState({liked:true})}}>
        {this.state.liked === true ? 'Liked':'Like'} // 컨텐츠 부분 반영
        // {this.state.liked ? 'Liked':'Like'} 자바스크립트 문법상 이렇게도 됨
        </button>
      }
    }
  </script>

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

</html>
728x90
저작자표시

'유튜브 강의' 카테고리의 다른 글

제로초 리액트 강의 1.3  (0) 2021.10.31
제로초 리액트 강의 1.2 구구단 만들기  (0) 2021.10.30
생활코딩 React 1  (0) 2021.10.17
생활코딩 자바스크립트  (0) 2021.10.08
코딩앙마 자바스크립트 기초 강의 14. 배열(Array)  (0) 2021.08.13
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함