[React 공식문서] 5. State and Lifecycle

state는 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어됩니다.

 

클래스의 생명주기 메서드

마운팅: 처음 DOM에 렌더링 될 때

언마운팅: 생성된 DOM이 삭제될 때

 

클래스 컴포넌트에서는 특별한 메서드를 사용하여 컴포넌트가 마운트 / 언마운트 될 때 일부 코드를 작동시킬 수 있고 이러한 메서드를 생명주기 메서드라고 불립니다.

 

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

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

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

  tick() {    this.setState({      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')
);

1. <Clock/>이 ReactDOM.render()로 전달되면, Clock 컴포넌트의 constructor 호출
2. Clock은 this.state를 초기화
3. React는 Clock 컴포넌트의 render() 메서드를 호출하고 DOM을 업데이트
4. Clock 출력값이 DOM에 삽입되면 componentDidMount() 생명주기 메서드 호출 → tick() 메서드 호출
5. 매초 브라우저가 tick() 메서드를 호출하고 Clock 컴포넌트는 setState() 속 시각 객체를 호출하며 render() 메서드를 다시 호출
6. render() 메서드 안의 this.state.date가 달라지고 React는 이에 따라 DOM을 업데이트
7. Clock 컴포넌트가 DOM으로부터 삭제된 적이 있다면 componentWillUnmount() 생명주기 메서드를 호출해 타이머를 멈춤

 

State를 올바르게 사용하기

setState 특징

 

1. 직접 state를 수정하지 않고 setState()를 사용합니다.

직접 state를 수정하는 것은 컴포넌트를 다시 렌더링 하지 않습니다.

this.state를 지정할 수 있는 유일한 공간은 constructor입니다.

 

2. state 업데이트는 비동기적일 수도 있습니다.

React는 성능을 위해 여러 setState() 호출을 단일 업데이트로 한번에 처리할 수도 있기 때문입니다.

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

 

3. state 업데이트는 병합됩니다.

state에 posts와 comments가 있다고 했을 때

별도의 setState 호출로 독립적으로 업데이트 할 수 있습니다.

 

데이터는 아래로 흐릅니다.

state는 소유한 컴포넌트 이외에는 어떠한 컴포넌트도 접근할 수 없기 때문에 로컬 혹은 캡슐화라고 불립니다.

컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있습니다.

 

이를 하향식(top-down) 혹은 단방향식 데이터 흐름이라고 합니다.

모든 state는 항상 특정한 컴포넌트가 소유하고 있으며, 그 state로부터 파생된 UI나 데이터는 자신의 아래에 있는 컴포넌트에만 영향을 미칩니다.

 

function App() {
  return (
    <div>
      <Clock />      <Clock />      <Clock />    </div>
  );
}

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

App은 세개의 <Clock>을 갖지만 각 Clock은 자신만의 타이머를 설정하고 독립적으로 업데이트를 합니다.

---

❗ 요약 정리 ❗

1️⃣ state는 컴포넌트에 의해 완전히 제어되며 소유한 컴포넌트 외에 어떠한 컴포넌트도 접근 불가능(캡슐화)

 

2️⃣ state로 파생된 UI나 데이터는 트리구조의 아래에 있는 컴포넌트에만 영향을 미침(단방향 데이터 구조)

 

---

https://ko.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React