리액트 뽀개기 (3)

state를 알아보자.

 

state는 클래스에서만 사용이 가능하다 

props와 비슷하지만 컴포넌트에 의해 완전히 제어되며 private속성이다.

 

일단 함수 컴포넌트에서 클래스 컴포넌트로 조금 수정을 했다.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Clock from './Clock';

class App extends React.Component {
  render() {
    return (
      <div>
        <Clock />
      </div>
    );
  }
}

export default App;

그리고 Clock이라는 컴포넌트를 만들었다. 

import React, { Component } from 'react';

class Clock extends Component{
    render(){
        return (
            <h2>지금 시간은 {this.props.date.toLocaleTimeString()} 입니다.</h2>
        )
    }
}

export default Clock;

여기서 Clock  컴포넌트에서 자동으로 시간이 update 하게 만들어 주려고 한다. 

state를 추가하자 (state는 객체 형태로 되어야 한다.)

import React, { Component } from 'react';

class Clock extends Component{
   
    state = {date: new Date()};

    render(){
        return (
            <h2>지금 시간은 {this.state.date.toLocaleTimeString()} 입니다.</h2>
        )
    }
}

export default Clock;

이제 시간을 업데이트하는 구문을 넣어주면 된다.

state는 직접적으로 건드리면 안 된다. 항상  setState()를 사용한다.

import React, { Component } from 'react';

class Clock extends Component{
    
    state = {date: new Date()};

    componentDidMount() {
        this.timerID = setInterval(
            () => this.tick(),
            1000
        );
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    tick() {
        this.setState({date: new Date()});
    }

    render(){
        return (
            <h2>지금 시간은 {this.state.date.toLocaleTimeString()} 입니다.</h2>
        )
    }
}

export default Clock;

결과를 확인하면 시간이 흐르는 것을 볼 수 있다.

 

 

시간이 흐른다.

 

 컴포넌트 클래스를 만들면 생성자 함수가 실행된다. 초기값을 설정하는 거라고 생각하면 된다.

import React, { Component } from 'react';

class Clock extends Component{
    
    state = {date: new Date()};
    
    constructor(props) {
        super(props);
    }
    
    ....

중간에 화살표 함수를 사용한 이유는 react에서는 es6 class를 사용 하경우 this를 autobinding 하지 않는다.

그래서 이것을 해결하기 위해 생성자 함수에 정의하거나 화살표 함수를 사용하면 된다.

 

아무래도 화살표 함수가 쉽고 많은 생각을 하지 않아도 되기에 편할 것이다.