리액트 5 - State와 생명주기

김민찬·2022년 3월 8일

React

목록 보기

5/12

오늘 알아볼 것

State
생명주기

State

Prop와 유사하지만 비공개이며, 컴포넌트에 의해 완전히 제어된다.

함수에서 클래스로 변환

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

클래스로 변환시키면,

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

여기서 render 메서드는 업데이트가 발생할 때마다 호출되지만, 같은 DOM 노드로 Clock 컴포넌트를 렌더링하는 경우 Clock 클래스의 단일 인스턴스만 사용된다.

클래스에 로컬 State 추가하기

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

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

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

마운팅
컴포넌트가 처음 DOM에 렌더링 될 때마다 타이머를 설정한다.

언마운팅
컴포넌트에 의해 생성된 DOM이 삭제될 때마다 타이머를 해제한다.

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

  componentDidMount() {
  }

  componentWillUnmount() {
  }

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

componentDidMount()는 컴포넌트 출력물이 DOM에 렌더링 된 후 실행된다.
여기서 타이머를 설정하기 좋다.

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

componentWillUnmount()에서는 타이머를 분해한다.

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

setState를 사용하여 date를 업데이트 하는 메서드를 구현한다.

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

생명주기에 대한 자세한 글은 여기로

State의 올바른 사용

State를 직접 수정하지 말 것.
대신 setState를 사용하자.
State 업데이트는 비동적일 수 있다.
React는 성능을 위해 setState 호출을 한꺼번에 처리할 수 있다.
this.state가 비동기적으로 업데이트 될 수 있기 때문에 다음 state를 계산할 때
해당 값에 의존해서는 안된다.
State 업데이트는 병합된다.
setState를 호출할 때 React는 제공한 객체를 현재 state로 병합합니다.