리액트 스터디

[React] 4. 리액트 스터디 - 클래스, 함수 사용

더밸류(THEVALUE) 2022. 10. 4. 21:48

리액트 클래스와 함수 사용에 대한 설명 및 샘플 예제.

 

[ 클래스 사용 ]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 1. 라이브러리 (CDN)  -->
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>

<title>리액트 스터디중</title>
</head>
<body>
  <!-- 2. 출력 영역 지정  -->
  <div id="display"></div>
  
  <!-- 3. 화면에 출력될 내용 (text/babel) 작성 (es6 사용가능) -->
  <script type="text/babel">
    // 클래스를 사용
    // props, state를 이용해서 데이터를 저장하는 경우 -> 생성자를 통해 초기화 
    class Hello extends React.Component {
      render() {
        const clickHanlder=(e)=> {
          alert('안녕하세요')
        }
        return(
          <div onClick={clickHanlder}>
            <h1>Test!!</h1>
          </div>
        )
      }
    }

    ReactDOM.render(<Hello/>, document.getElementById('display'))
  </script>
</body>
</html>

 

[ 함수 사용 ]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 1. 라이브러리 (CDN)  -->
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>

<title>리액트 스터디중</title>
</head>
<body>
  <!-- 2. 출력 영역 지정  -->
  <div id="display"></div>
  
  <!-- 3. 화면에 출력될 내용 (text/babel) 작성 (es6 사용가능) -->
  <script type="text/babel">

    // 함수를 사용
    // 중첩된 컴포넌트에서 부모로부터 넘겨받은 매개변수를 받아서 출력 (props)
    const Hello=()=> {
        const clickHanlder=(e)=> {
          alert('안녕하세요')
        }
        return(
          <div onClick={clickHanlder}>
            <h1>Test!!</h1>
          </div>
        )
    }

    ReactDOM.render(<Hello/>, document.getElementById('display'))
  </script>
</body>
</html>