React,js constructor질문입니다

Question

import React, { Component } from 'react'; import './App.css'; class Test extends Component { constructor(props) { super(props); this.state = { value: 2 }; } this.state = { value: 2 }; //취소 render() { this.state = { value: 2 };//답변보고 이쪽에 다시 적었습니다 return ( <div className="App"> </div> ); }} export default Test;

constructor을 사용하지 않은 state와 그렇지않은 state는 어떤차이가 있는걸까요 코드상 위 아래 부분의 차이를 알려주세요!

그리고 state라고 약속하고 쓰는거같은데 변수로 따로 만들어서 저것과 동일하게 사용이 가능한지

가능하시면 간단한 예제 보여주실수있을까요

Answer 1

Q: constructor에서 초기화한 state와 constructor 밖에서 초기화한 state는 어떤 차이가 있는걸까요?

A: constructor에서 초기화하신다면 React Element가 생성되는 시점에 state가 초기화됩니다.그러나 render 메서드에서 초기화하신다면 React Element가 rendering 되는 시점에 state가 초기화됩니다.후자의 경우, 매 rendering 마다 state가 초기화되므로 state를 100% 활용할 수 없을 뿐더러, state를 Component.prototype.setState 메서드가 아닌 다른 방식으로 수정하면 리액트가 state의 변경을 감지하지 못하게 하기 때문에 re-rendering을 일으키지 않습니다.

Q: state라고 약속하고 쓰는 것 같던데 변수로 따로 만들어서 저것과 동일하게 사용이 가능한지, 가능하면 예제를 보여주세요.

A: 네, 약속하고 쓰는 것 입니다. 또한 말씀하신대로 state 와는 별개인 바인딩을 만들어 state처럼 활용할 수 있습니다. 차이점은 리액트가 미리 정의해 둔 기능을 사용하는가? 의 여부 정도입니다(리액트에서 각종 API를 제공하기 때문에 충분히 state를 모방할 수 있습니다).


import React from 'react';

let renderCount = 0;

class MyComponent extends React.Component {
render() {
renderCount++;
return <p>this component is rendered {renderCount} times!</p>
}
}


----
More Reading:

[React Lifecycle diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)
[Lifecycle is..](https://reactjs.org/docs/glossary.html#lifecycle-methods)
[React.Component](https://reactjs.org/docs/react-component.html)

[What is state?](https://reactjs.org/docs/react-component.html#state)

----
P.S 헉, 인덴트가 안 먹네요...;; 에디터 개선이 필요해 보입니다.
[What is state](https://reactjs.org/docs/react-component.html#state)

Answer 2

작성하신 코드는 에러가 나는 코드입니다. this.state 와 같은 전역 변수는 class 바로 안쪽에서 작성할 수 없지요. 메서드나 생성자를 통해서 this.state를 초기화하셔야 합니다. 아마도 아래와 같은 코드를 생각하신 것이겠지요? constructor 바깥쪽의 state는 state = {value:2}; 와 같이 말이죠.

import React, { Component } from "react"; class Test extends Component { state = { value: 2 }; constructor(props) { super(props); this.state = { value: 22 }; } render() { return <div className="App">{this.state.value} </div>; } } export default Test;

차이라고 한다면 초기화의 시점이라고 봐야할 것 같습니다. 일부러 두개의 값을 다르게 해보았는데 constructor 쪽의 값이 최종적으로 적용된 것을 볼 수 있습니다. constructor 내부의 state 초기화가 나중에 실행된 것이죠...

그럼 둘 중의 어느 것을 사용할 것인지도 생각해봐야겠네요. 우선 결론은 constructor쪽에서 초기화하시라고 권해드립니다. 이유는요 constructor의 파라미터 때문입니다. props라는 인자를 사용할 수 있지요? props는 바로 부모 컴포넌트로부터 전달받는 속성(properties) 입니다. 자주 사용하는 기법은 아니지만 간혹 부모 컴포넌트로부터 전달받은 props를 이용해 자기 자신 컴포넌트의 state를 초기화해야할 때가 있습니다. 이럴때는 constructor를 이용해야만 합니다.

다른 분의 의견도 들어보시고 결정해보세요..