React 생성자

생성자

class TempComponent extends Component {
	constructor(props){
	  super(props);	
}

render(){
	return(<></>);	
  }
}

React에서 Component를 생성할 때 state 값을 초기화하거나 메서드를 바인딩할 때 constrouctor()를 사용

React의 Component의 생성자는 해당 Component가 마운트 되기 전 호출

React.Component를 상속한 컴포넌트의 생성자를 구현할 시에 super(props) 선언을 권고함

class TempComponent extends Component{
	constructor(props){
		super(props);
		this.state({counter: 0})
	}

	render(){
		return(<></>);
	}
}

constructor를 사용할 때 this.setState가 아닌 this.state를 사용해야함

생성자 내에서 구독 작업이나 외부 API호출을 하면 안됨.
componentDidMount()를 사용

class TempComponent extends Component{
	constructor(props){
		super(props);
		this.state = { color : props.color }
	}

	render(){
		return(
		<div>{this.props.color}</div>     (o)
      		<div>{this.state.color}</div>	  (x)
		);
	}
}

흔히 하는실수가 props로 전달된 값을 state로 복사하는 것인데
state로 복사하여 사용하면 버그를 발생할 수 있고 props가 변하더라도 state는 업데이트가 되지 않음

class TempComponent extends Component
	
	constructor(props){
		super(props);
		this.state = { color : props.color } (o)
	}
	
	componentWillReceiveProps(nextProps){   (x)
		this.setState({ color : nextProps.color});	
	}

	render(){
		return(
		<div>{this.state.color}</div> (x)
		<div>{this.props.color}</div> (o)
		);
	}

일부 잘못된 생각으로 componentWillReceiveProps()나 componentWillUpdate()를 사용하여 state와 props를 다시 복사하는 코드를 사용하는 것은 안됨!!

setState는 추가 랜더링을 발생하여 성능상 이슈가 있을 수 있으며 버그를 발생시킬 수 있음