[react] Props&State ③ - State (동적 타이머 만들기)

1. state 란 ?

• 각 컴포넌트들이 가질 수 있는 상태들의 집합

• props를 통해서 자식 컴포넌트로 값을 넘길 수 있다

• 컴포넌트들마다 state는 있을 수도 있고, 없을 수도 있음, 남발하면 안 좋다는 뜻

  • props 만으로도 표현할 수 있는가?

  • Render로 표시되지 않는 값인가?

    => 2개에 해당되지 않는다면 state로

    원래 Fucntion는 stateless로 구분였지만 hook이 등장하면서 Function도 state를 쓸 수 있게 되었음
    하지만 class를 이해해야 hook도 이해하기 쉬우므로 class 먼저 함

2. state를 사용하여 만들었던 WorldClock함수를 class로 만들어보자

   단, 다음과 같은 요구 사항이 있음
   요구사항 1. 시간과 분이 변화하는 것을 보고 싶다.
   요구사항 2. 동적으로 보고 싶다.

   class WorldClock extends React.Component{
     constructor(props){ 
       super(props) //React.Component의 input
       this.state = {
         hour: this.props.time,
         minute : 0
       }
     }
     //미리 약속된 함수 (리액트 컴포넌트가 읽어서 보여주는 부분)
     render(){
       return(
         <div className= "WorldClock">
           <h2>🌎도시 : {this.props.city}</h2>
           <p>⌚시간 : {this.state.hour} 시 {this.state.minute} 분 </p>
         </div>
       )
     }
   
   }
   

분이 추가됐다!

3. 동적으로 바꿔보자

   setInterval()이라는 자바스크립트 기본 함수를 이용해서 분이 자동적으로 1씩 증가하게 해보자
   state 값을 수정할 때는 반드시 setState를 사용해야하며 원본 데이터를 변경하는 것이 아니라 깊은 복사하여 덮어 씌워야한다.
   (react 공식문서 tic tac toe 만들기에서 불변성이 왜 중요할까요? 참고)

     setInterval(()=>{
       this.setState((state)=>(
         {minute:state.minute + 1}
   
       ))
     },100)

   npm start를 하면 분이 자동으로 바뀌는 모습을 볼 수 있다. 하지만 분이 60을 넘어도 계속 증가한다. 이를 해결하기 위해서 조건을 넣어 60 분이 되면 시간이 1 증가하고 분은 0이 되도록 해보자.

     setInterval(()=>{
       this.setState((state)=>(
         state.minute === 59?
         {hour: state.hour +1, minute : 0} :
         {minute:state.minute + 1}
   
       ))
     },100)    

잘 됨