State

state

사전적 정의

(명사) 상태

React에서는

props와 연결 지어 한 가지 예를 들면, props은 상위 Component로부터 나옵니다. 하지만 만약에 상위 Component에 존재하지 않지만 지금 사용하고 있는 Component에 필요한 data가 있다면 어떻게 해야 할까? 이것을 위해 사용하는 것이 바로 state이다.

 

또 상위 Ceompoent의 state값을 하위 Component의 props값으로 보내는 것도 가능하다.

constructor(props)

메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React Component에는 Constructor를 구현하지 않아도 됩니다.

React Component의 constructor는 해당 Component가 마운트 되기 전에 호출됩니다. React.Component를 상속한 Component의 constructor를 구현할 때에는 다른 구문에 앞서 super(props)를 호출해야 합니다. 그렇지 않으면 this.props가 constructor 내에서 정의되지 않아 버그로 이어질 수 있습니다.

React에서 생성자는 보통 아래의 두 가지 목적을 위하여 사용됩니다:

• this.state에 객체를 할당하여 지역 state를 초기화
• 인스턴스에 이벤트 처리 메서드를 바인딩

예시

constructor(props) {
  super(props);
  // 여기서 this.setState()를 호출하면 안 됩니다!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

주의 사항

• constructor 내부에서 setState()를 호출하면 안 됩니다. Component에 local state가 필요하다면 생성자 내에서 this.state에 초기 state 값을 할당하면 됩니다.
• constructor는 this.state를 직접 할당할 수 있는 유일한 곳입니다. 그 외의 메서드에서는 this.setState()를 사용해야 합니다.
• constructor 내에서는 부수 효과를 발생시키거나 구독 작업(subscription)을 수행하면 안 됩니다. 해당 경우에는 componentDidMount()를 대신 사용하세요.
• state에 props를 복사하면 안 됩니다! 가장 흔히 범하는 실수 중 하나입니다.
  • 예시

    constructor(props) {
     super(props);
     // 이렇게 하지 마세요!
     this.state = { color: props.color };
    }​

    이것은 불필요한 작업이며(this.props.color를 직접 사용하면 됩니다), 버그를 발생시킵니다(color props의 값이 변하더라도 state에 반영되지 않습니다).

출처

https://ko.reactjs.org/docs/react-component.html#constructor

React.Component – React

https://www.youtube.com/watch?v=rOpg2KUPW2M&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=16