- 컴포넌트의 상태값 👉 화면에 그려지는 UI의 정보가 저장되는 객체 (사진, 타이틀, 가격... 등)
- 얼마든지 변경이 가능하다.
import React from 'react';
class Parent extends React.Component {
constructor() {
super();
this.state = {
titleColor: "red",
subTitleColor: "blue",
};
}
changeTitleColor = () => {
this.setState({ titleColor: "green", })
}
render() {
const { titleColor, subTitleColor } = this.state;
const { changeTitleColor } = this;
return (
<div>
<h1 style = {{ color: titleColor }}>Class Component | state</h1>
<button onClick={ changeTitleColor }>색 바꾸기</button>
</div>
);
}
export default Parent;
비구조화 활당 (구조분해 할당)
어떤 객체나 배열을 사용 이런 구조를 깬다음 데이터를 어떤 변수에 저장하는
const obj = { name: "tony", age: 18, }; const { objName, objAge } = obj; objName; // 'tony' objAge; // 18
컴포넌트의 속성값 👉 부모 컴포넌트로부터 전달 받은 데이터를 가지고 있는 객체
(ex: state의 상태 값, event handler)
import React from 'react';
class Child extends React.Component {
render() {
// console.log(this.props);
return (
<div>
<h1 style={{color : this.props.titleColor}}>Child Component</h1>
</div>
);
}
}
export default State;