Props & State
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//함수로 컴포넌트 만들기
function ComponentFunction(props) {
return (
<div>
<h1>{props.message} this.props.message 이것은 함수로 만든 컴포넌트 입니다.</h1>
</div>
);
}
//클라스로 컴포넌트 만들기
Component.defaultProps = {
message: '디폴트!!!',//뒤에 나오는 static defaultProps = {message: '디폴트!!!',};와 동일
};
class ComponentClass extends React.Component {
//static defaultProps = {message: '안녕하세요!!!',};
render() {
return (
<div>
<h1>
{this.props.message} 이것은 클래스를 상속하여 만든 컴포넌트
입니다.
</h1>
</div>
);
}
}
ReactDOM.render(
<Component message="안녕하세요!!!" />,
document.querySelector('#root'),
);
</script>
</body>
</html>
Props
Propsは、構成部品の外部から供給されるデータです.
propsは属性を表すデータであり,Reactがユーザ定義のコンポーネントによって作成されたエンティティを発見すると,JSXのツリーとサブアイテムをそのコンポーネントに渡す単一のオブジェクトである.関数構成部品またはクラス構成部品は、構成部品自体のpropsを変更できません.
State
Stateは、構成部品内部で変更可能なデータです.
構成部品ではstate={};このように客体的な形で存在すべきだ.
PropsとStateが変更された場合、Renderは再起動する可能性があります.
class Component extends React.Component {
//스테이트 생성법 1
constructor(props) {
super(props);
this.state = {s: '스테이트'};
}
//스테이트 생성법 2
state = {
s: '스테이트',
count: 0
};
class C
render() {
return (
<div onClick={() => {
this.setState((previousState)=>{//setState로 이전 스테이트를 변경한다.
const newState ={count: previousState.count + 1}
return newState;
});
}}>{this.state.s} : {this.state.count}</div>
);
}
}
Render関数
PropsとStateに基づいて構成部品を描画し、PropsとStateが変化すると、構成部品が再描画されます.このとき、構成部品を描画する方法を説明する関数をレンダリングと呼びます.
Reference
この問題について(Props & State), 我々は、より多くの情報をここで見つけました https://velog.io/@annahyr/Props-Stateテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol