[React] 이론 정리 Mark II

State

• state는 고정적인 데이터가 아니라 변경될 수 있는 데이터를 처리할 때 효율적으로 사용될 수 있다. 실제로 state 값을 변경해서 화면이 변경되면 render()함수가 다시 실행되어 실제로 화면에 적용해준다.

• state를 사용하기 위해서는 함수형 컴포넌트 대신에 클래스형 컴포넌트를 사용해야 한다. props만 이용하고자 한다면 함수형 컴포넌트를 그대로 사용해야한다. 다시 말해 내부 객체의 값이 변경될 여지가 있다면 클래스형 컴포넌트로 state를 사용하고, 그렇지 않다면 props를 사용하면 된다.

• 쉽게 말해서 데이터를 임시적으로 저장하는 저장소 개념으로 볼 수 있다. 내가 원하는 상황(이벤트, 특정 함수 등)에서 데이터를 가져와서 사용하는 것이 가능하고 props를 사용해서 하위 컴포넌트에 데이터를 뿌려주는 것도 가능하다.

exercise.1

class Clock extends React.Component {
  constructor(props){	// constructor 생성자 초기화
    super(props);		// props 초기화
    this.state={		// state 초기화
      date: new Date()	// state에 date: new Date() 프로퍼티를 저장
    };
  }
  
  tick() {
    this.setState({		// state를 변경할 떄는 꼭 setState로 변경!!!!
    date:new Date()		// state(상태)를 변경해준다. 
    })}
  
  componentDidMount(){	// 모든 렌더가 끝난 후 마지막에 호출된다.
    this.timerID = setInterval(()=> this.tick(),1000);
  }		
  
  componentWillUnmount(){	// 리소스 낭비를 방지하기 위해 사용한 Component를 꺼준다.
    clearInterval(this.timerID);
  }
  
  render(){
  return(
  <h3> 
    현재 시각은 [{this.state.date.toLocaleTimeString()}] 입니다. //	state에 있는 data(key)의 value를 호출 후 string으로 바꿔준다.(시간이 string처럼 보이게)
    </h3>			
    );
 }
}

ReactDOM.render(<Clock />, document.getElementById('root'));
// 리액트 돔에서 Component를 받아 브라우저에 렌더링해준다.

exercise 2

class Clock extends React.Component { // Clock이라는 컴포넌트 생성
  constructor(props){	//constructor 초기화
    super(props);		//props 초기화
    this.state={		//state 생성 
      date: new Date()	// state에 변할 수 있는 key의 value를 저장
    };
  }

  goBack() {	//goBack 함수 선언 , 10초 전으로 가는 함수
    let nextDate = this.state.date;	// 변수에 state에서 date value 호출
    nextDate.setSeconds(nextDate.getSeconds() - 10);	// nextDate의 시간을 10초 전으로 돌려줌 
    this.setState({
      date: nextDate 	// state의 date를 nextDate값으로 바꿔줌 
    });
  }
  
  render(){
  return(
    <div>
      <h3> 
      현재 시각은 [{this.state.date.toLocaleTimeString()}] 입니다.
      </h3>
      <button onClick={this.goBack.bind(this)}>10초 뒤로가기	// 버튼 클릭 이벤트가 발생하면 goBack함수 실행 
      </button>
     </div>
    );
 }
 }

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