State and Lifecycle

React 컴포넌트 안의 state와 생명주기에 대한 개념을 소개합니다.

Clock 컴포넌트를 완전히 재사용하고 캡슐화하는 방법을 배웁니다.
이 컴포넌트는 스스로 타이머를 설정할 것이고 매초 스스로 업데이트 할 것입니다.

class Clock extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello, World</h1>
                <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

render 메소드는 업데이트가 발생할 때마다 호출되지만, 같은 DOM 노드로 <Clock /> 을 렌더링하는 경우 Clock 클래스의 단일 인스턴스만 사용됩니다. 이것은 로컬 state와 생명주기 메소드와 같은 부가적인 기능을 사용할 수 있게 해줍니다.

클래스에 로컬 State 추가하기

세 단계에 걸쳐서 date 를 props에서 state로 이동해 보겠습니다.

1.render() 메소드 안에 있는 this.props.date 를 this.state.date 로 변경합니다.
2.초기 this.state 를 지정하는 class constructor 를 추가합니다.
-클래스 컴포넌트는 항상 props로 기본 contructor를 호출해야 합니다.
3.<Clock /> 요소에서 date prop을 삭제합니다.

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

    render() {
        return (
            <div>
                <h1>Hello, World</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

function tick() {
  ReactDOM.render(
    <Clock />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);