[React] 3. State와 Lifecycle

1. State

짤막 Review

Vue에서는 Vuex라는 라이브러리를 설치해서 app에 있는 모든 component의 중앙저장소인 state를 관리했다.

 

그렇다면 React에서는?

• state는 사전적 의미로 상태 라는 뜻이다.
• 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.
• 각각의 Component에서 state를 관리한다.
• Props는 컴포넌트에 전달되고, State는 컴포넌트 '안'에서 관리된다.
• state는 직접 수정하지 않고! setState라는 함수를 통해 수정해야 한다.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);

• 클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 한다.

---

2. Life Cycle

 

짤막 Review

Vue의 Life Cycle 기억하기!
https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

• mount - update - unmount
• 컴포넌트는 계속 존재하는 것이 아니라, 시간의 흐름에 따라 업데이트 되다가 사라진다.