React 기본이해 2

kh0520·2022년 6월 27일

1)학습내용

component의 기본적인 속성 메소드

클래스의 메소드 오버라이드하기


//생성자 코드
class APP extends react.Component{
    constructor(props){
        super(props)
    }
}    //생성자 생성자가 여러일을 해주므로 super(props) 를 이용해 부모생성자호출


//출력할 것
render(){

}

//컴포넌트가 화면에 출력될때 호출
componentDidMount(){

} 

//컴포턴ㄴ트가 화면에서 제거될때 호출
componentWillUnmount(){

}

우리가 변경해서 사용하는 속성으로는 stats 속성이 있는데 속성값을 변경할댸는 setStats()메소드를 사용 출력할때는 render()를 호출해서 화면에 변경사항을 출력.

상태선언하기(생성자 위치)
this.stats = {속성: 값}
this.setState({변경할 속성: 값})

리액트를 활용한 시간 출력 프로그램

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
    
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
   
    <script type="text/babel">
      // 애플리케이션 클래스 생성하기
      class App extends React.Component {

        constructor (props) {
          super(props)
          this.state = {
            time: new Date()
          }
        }
        render () {
          return <h1>{this.state.time.toLocaleTimeString()}</h1>
        }
        componentDidMount () {
          // 컴포넌트가 화면에 출력되었을 때
          this. timerId = setInterval(() => {
            this.setState({
              time: new Date()
            })    
          }, 1000)  
        }
       
        componentWillUnmount () {
          // 컴포넌트가 화면에서 제거될 때
          clearInterval(this.timerId)
        }
      }

      // 출력하기
      const container = document.getElementById('root')
      ReactDOM.render(<App />, container)
    </script>
  </body>
</html>