React Component안에서 State의 생명주기에 대한 개념을 이해해보자.

기존 시간 표시 React element

const root = ReactDOM.createRoot(document.getElementById('root'));
  
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

이 컴포넌트를 재사용하는 과정을 통해 State의 Lifecycle에 대해 이해해보자.

const root = ReactDOM.createRoot(document.getElementById('root'));

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
	root.render(<Clock date={new Date()} />);
}

setInterval(tick, 1000);

다음과 같이 Clock 컴포넌트를 분리했다. 하지만, 외부에서 new Date()상태를 받음으로써 구현하고 있기 때문에 Clock컴포넌트 자체는 완벽하지 않다. Clock 컴포넌트 자체에서 상태를 소유해야 의미가 있는 상황.

const root = ReactDOM.createRoot(document.getElementById('root'));

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
	root.render(<Clock />);
}

setInterval(tick, 1000);

함수형 컴포넌트를 클래스 컴포넌트로 변환하기

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

React.Component를 상속받아 render 메소드를 구현하는 것으로 변경하였다.

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

클래스에 로컬 State 추가하기

1. render()메소드에 this.props를 this.state로 변경

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

1. 초기 this.state를 지정하는 class constructor를 추가

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>
    );
  }
}

⚠️ constructor에서 super()키워드를 통해 먼저 props 전달하기 ⇒ 전달하지 않으면, this사용 못함.

생명주기 메서드를 클래스에 추가하기