React - State

State : 변경될 수 있는 데이터를 처리할때 효율적으로 사용 가능함

함수형 컴포넌트가 아니라, class형 컴포넌트를 사용해야 한다@@

 

 

 

HTML

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

 

 

CSS

.blue{
  color: blue;
}

.red{
  color: red;
}

 

 

 

 

 ReactDOM 에 render 함수가 수행되는 것이 아니라!!!!

컴포넌트를 활용해서 render함수를 이용해 rendering이 수행될 수 있도록 하는것

 

class Clock extends React.Component{
  //class 형일때는 무조건 render 함수가 꼭 필요하다!!!
  //class 형 컴포넌트를 사용할 경우 props를 기본적으로 내장하고 있어서 앞에 this 키워드 붙여서 해당 컴포넌트에 내장된 props 이용해야한다. 
  
  //state 적용해서 화면 구성하기
  constructor(props){
    //생성자 굳이 표기하고 싶으면 super로 받아줘야한다 
     super(props);
    //state: 특정 클래스가 내부적으로 가지고 있는 변수이다. 
     this.state={
       date: new Date()
    };
  }
  render(){
    return(
      <h3>
         Current time is [{this.state.date.toLocaleTimeString()}]
      </h3>
    );
  }
}


ReactDOM.render(<Clock/>, document.getElementById('root'));

시간이 동적으로 변하지 않는다. 

이럴때는 컴포넌트의 라이프사이클을 이용하면 된다

 

class Clock extends React.Component{
  //class 형일때는 무조건 render 함수가 꼭 필요하다!!!
  //class 형 컴포넌트를 사용할 경우 props를 기본적으로 내장하고 있어서 앞에 this 키워드 붙여서 해당 컴포넌트에 내장된 props 이용해야한다. 
  
  //state 적용해서 화면 구성하기
  constructor(props){
    //생성자 굳이 표기하고 싶으면 super로 받아줘야한다 
     super(props);
    //state: 특정 클래스가 내부적으로 가지고 있는 변수이다. 
     this.state={
       date: new Date()
    };
  }
  
 tick(){
   this.setState({//초기화 할때는 그냥 state가 아니라 setState라고 해야한다(코드상 문제는 없지만 시간이 변하지 않는다)
     date : new Date()
   })
 }
  
  
  
  //component가 초기화가(mount) 끝났을때 자동으로 불러와지는 함수  
  componentDidMount(){
    this.timerID = setInterval(()=> this.tick(), 1000);
  }
  
  render(){
    return(
      <h3>
         Current time is [{this.state.date.toLocaleTimeString()}]
      </h3>
    );
  }
}


ReactDOM.render(<Clock/>, document.getElementById('root'));

 

10초 뒤로가기 버튼 만들기

class Clock extends React.Component{
  //class 형일때는 무조건 render 함수가 꼭 필요하다!!!
  //class 형 컴포넌트를 사용할 경우 props를 기본적으로 내장하고 있어서 앞에 this 키워드 붙여서 해당 컴포넌트에 내장된 props 이용해야한다. 
  
  //state 적용해서 화면 구성하기
  constructor(props){
    //생성자 굳이 표기하고 싶으면 super로 받아줘야한다 
     super(props);
    //state: 특정 클래스가 내부적으로 가지고 있는 변수이다. 
     this.state={
       date: new Date()
    };
  }

  goBack(){
    let nextDate = this.state.date;//현재의 시간 객체를 가져오기 
    nextDate.setSeconds(nextDate.getSeconds() -10);
    this.setState({
      date: nextDate
    });
  }
  
  
  
  render(){
    return(
      <div>
        <h3>
           Current time is [{this.state.date.toLocaleTimeString()}]
        </h3>
        <button onClick ={this.goBack.bind(this)}>10초 뒤로가기</button>
      </div>
    );
  }
}


ReactDOM.render(<Clock/>, document.getElementById('root'));