\n\nLifecycle API
\n
컴포넌트가 브라우저에서 나타날때, 사라질때, 그리고 업데이트 될 때, 호출되는 API
\n\n\nComponent 생성
\n
\n\nComponent 업데이트
\n
⇒ 기본적으로 true를 반환하지만, 특정 조건에 따라 false를 반환하도록 변경하면 불필요한 리렌더링을 방지해준다. (render()함수를 호출하지 않음)
\n\n\nComponent 제거
\n
Counter.js
\nimport React, {Component} from 'react';\n\nclass Counter extends Component {\n // Component의 state를 정의할 때는 class field를 사용함\n state = {\n number: 0\n }\n\n // 생성자\n constructor(props) {\n super(props);\n console.log('constructor');\n }\n\n // 컴포넌트가 화면에 나타나게 됐을 때 호출\n componentDidMount() {\n console.log('componentDidMount');\n }\n\n // 불필요한 리렌더링을 방지\n shouldComponentUpdate(nextProps, nextState) {\n console.log('shouldComponentUpdate');\n // number가 5의 배수이면 리렌더링 되지 않음\n if(nextState.number%5==0) return false;\n return true;\n }\n\n componentDidUpdate(prevProps, prevState) {\n console.log('componentDidUpdate');\n }\n \n // Component에 method 작성\n handleIncrease = () => {\n const {number} = this.state;\n this.setState({\n number : number+1\n });\n }\n handleDecrease = () => {\n const {number} = this.state;\n this.setState({\n number : number-1\n });\n }\n render() {\n console.log('render');\n return (\n <div>\n <h1>Counter :\n </h1>\n <div>Value : {this.state.number}</div>\n <button onClick={this.handleIncrease}>+</button>\n <button onClick={this.handleDecrease}>-</button>\n </div>\n )\n }\n}\nexport default Counter;\n\nComponent 에 에러가 발생하면?
\n
componentDidCatch(error, info) {\n this.setState({\n error: true\n });\n}⇒ state.error를 true로 설정 후, render() 함수에서 if문을 이용하여 에러 catch
\nCounter.js
\nimport React, {Component} from 'react';\n\nconst Problematic = () => {\n // error를 throw하는 구문\n throw (new Error('버그 발생 !'));\n return (\n <div></div>\n ); \n};\n\nclass Counter extends Component {\n state = {\n number: 0\n }\n\n handleIncrease = () => {\n const {number} = this.state;\n this.setState({\n number : number+1\n });\n }\n handleDecrease = () => {\n const {number} = this.state;\n this.setState({\n number : number-1\n });\n }\n // 자식 컴포넌트에서 발생한 에러를 잡는 함수\n componentDidCatch(error, info) {\n this.setState({\n error : true\n });\n }\n\n render() {\n // error가 true 이면 Element return \n if(this.state.error) return (<div>error 발생 !</div>);\n return (\n <div>\n <h1>Counter :\n </h1>\n <div>Value : {this.state.number}</div>\n {/* number가 4이면 Problematic 컴포넌트를 렌더링함 */}\n { this.state.number==4 && <Problematic/>}\n <button onClick={this.handleIncrease}>+</button>\n <button onClick={this.handleDecrease}>-</button>\n </div>\n );\n }\n}\nexport default Counter;\n\nRendering에서 발생하는 에러를 방지하기 위해서..
\n
ex)
\nerror
\nthis.props.object.value; // object is undefined\nthis.props.array.length; // array is undefinedsolution
\nrender() {\n if (!this.props.object || !this.props.array || this.props.array.length ===0) return null;\n // object 나 array 를 사용하는 코드\n}or
\nstatic defaultProps = {\n onIncrement: () => console.warn('onIncrement is not defined'),\n object: {},\n array: []\n }