props
& state
props
는 부모컴포넌트가 자식컴포넌트에게 주는 값이다.props
를 받기만하고 직접 수정 할 수는 없다.<자식컴포넌트>
import React, {Component} from "react"; class SmartPhone extends Component { render() { return ( <div className="SmartPhone"> <h3> 제조사: {this.props.maker} </h3> <h3> 색상: {this.props.color} </h3> <h3> 용량: {this.props.capacity} </h3> </div> ); } } export default Student;
<부모컴포넌트>
import React, {Component} from "react"; import SmartPhone from "./SmartPhone"; class App extends Component { render() { return ( <div className="App"> <SmartPhone maker: "apple" color: "black" capacity: "256GB" /> </div> ); } } export default App;
부모 Component(App.js)
에서 지정한maker, color, capacity
가 자식Component(SmartPhone.js)
로 전달되어 SmartPhone에서this.props.maker
,this.props.color
,this.props.capacity
가 사용된다.
state
는 compenent
내부에서 선언하고 내부에서 값을 변경 할 수있다.props
의 값에 따라 내부의 구현에 필요한 데이터이다.import React, {Component} from "react"; import SmartPhone from "./SmartPhone"; class App extends Component { constructor(props){ super(props); this.state = { SmartPhone:{maker: "apple" color: "black" capacity: "256GB"} } render() { return ( <div className="App"> <SmartPhone maker: {this.state.SmartPhone.maker} color: {this.state.SmartPhone.color} capacity: {this.state.SmartPhone.capacity}> </SmartPhone> </div> ); } } export default App;
component
가 실행될 때constructor
함수가 있다면constructor
함수가 가장 먼저 실행되어 초기화를 담당한다.- 초기화가 끝나면
this.state
를 통해state
값을 초기화한다.SmartPhone
값을state
화 시키기 위해SmartPhone
프로퍼티 값으로 다시 객체를 준다.state
값을 사용하기 위해maker
에state
값을 준다.
react
에서props
값에 따옴표" "
를 쓰면 문자로 인식하기 때문에javascript
코드로서 실행되게 하고싶을 때{ }
를 써주면 된다.