[React]State란?

• 리엑트(React)의 상태(State)는 고정적인 데이터가 아니라 변경될 수 있는 데이터를 처리할 때 사용
• 리액트는 계속해서 상태변화를 감지하고 있기 때문에 state를 이용해서 어떠한 데이터를 화면에 그려준 다음 그 값을 변경하면 다시 render()함수를 수행해서 실제 화면에 적용해준다.
• 클래스형 컴포넌트를 이용해야 한다.
• 어떤 값을 명시한 이후에 값이 계속해서 변경된다면 state를 이용해서 해당 객체를 담을 수 있고 state값이 변경될때는 반드시 setState()함수를 이용해서 값을 변경할 수 있다.

---

일반적으로 사용되지 않는 형태의 소스코드. (props사용)

function Clock(props){
  return (
   <h3>현재 시각은 
      [{props.date.toLocaleTimeString()}]입니다.
   </h3>
  );
}
      
function tick(){
  ReactDOM.render(<Clock date={new Date()}/>,document.getElementById('root'));
}
setInterval(tick,1000);

 

이것을 state를 활용하는 방식으로 변경

class Clock extends React.Component{
  constructor(props){
    super(props);
    this.state = {//특정한 클래스가 내부적으로 가지고있는 변수
      date : new Date()
    };
  }
  
  tick(){
    this.setState({
      date : new Date()//현제 가지고있는 date변수의 값을 새로운 new Date()로 바꿔치기하기
    })
  }
 
  componentDidMount(){ //컴포넌트가 초기화가 끝났을때 자동으로 불러와지는 함수
    this.timerID = setInterval(() =>this.tick(),1000); //이컴포넌트 안에서 생성이 되어있는 tick 함수를 1초에 한번씩 불러오겠다고 정의
  }
  
  componentWillUnmount(){ //리소스낭비를 없애기 위해 컴포넌트가 이용이 끝났을때
    clearInterval(this.timerID);//clearInterval이용해서 해당 Interval종료
  }
  
  render(){
    return (
   <h3>현재 시각은 [{this.state.date.toLocaleTimeString()}]입니다.
   </h3>
    );
  } 
}
      
 ReactDOM.render(<Clock/>,document.getElementById('root'));

state를 사용하기 위해서는 함수형에서 클래스형으로 변경

클래스형일때는 render()함수를 가짐 render()함수 안에서 어떠한 내용을 렌더링 할 것이다 명시

클래스형 컴포넌트를 사용하는 경우는 props를 기본적으로 내장하고 있기 때문에

render()매개변수로 props를 넣어줄 필요가 없고
this키워드를 붙여서 해당 컴포넌트에 내장된 props를 이용해서 출력하도록 하기

 

위의 예제를 사용한 state를 활용한 버튼 예제

처음 시각을 처음에 한번 기록해 놓은 다음 특정 버튼을 누르면 시각이 10초씩 뒤로 밀려나게 하기

class Clock extends React.Component{
  constructor(props){
    super(props);
    this.state = {//특정한 클래스가 내부적으로 가지고있는 변수
      date : new Date()
    };
  }
  
  goBack(){
    let nextDate = this.state.date; //현제 시간 객체 가져오기
    nextDate.setSeconds(nextDate.getSeconds() - 10);
    this.setState({
      date : nextDate
    });
  }
  
  render(){
    return (
      //jsx문법에서는 두개이상의 원소가 들어갈때는 반드시 div태그 등으로 감싸기
      <div>
      <h3>현재 시각은 [{this.state.date.toLocaleTimeString()}]입니다.
      </h3>
        <button onClick = {this.goBack.bind(this)}>10초 뒤로가기</button>
      </div>
    );
  } 
}
      
 ReactDOM.render(<Clock/>,document.getElementById('root'));