1) 컴포넌트에서 유동적인 데이터를 다룰 때, state 를 사용합니다.
: React 어플리케이션을 만들 땐, state를 사용하는 컴포넌트의 갯수를 최소화하도록 해야합니다.예를들어, 10 개의 컴포넌트에서 유동적인 데이터를 사용하게 될 땐, 각 데이터에 state를 사용 할 게 아니라, props 를 사용하고 10 개의 컴포넌트를 포함시키는 container 컴포넌트를 사용하는것이 효율적입니다
2) state 의 초기 값을 설정 할 때는 constructor(생성자) 메소드에서 this.state= { } 를 통하여 설정합니다.
3) state 를 렌더링 할 때는 { this.state.stateName } 을 사용합니다.
4) state 를 업데이트 할 때는 this.setState() 메소드를 사용합니다.
: ES6 class에선 auto binding이 되지 않으므로, setState 메소드를 사용 하게 될 메소드를 bind 해주어야 합니다.
: (bind 하지 않으면 React Component 가 가지고있는 멤버 함수 및 객체에 접근 할 수 없습니다.)
App2에 state를 저장하고, RandomNumber.js 에서 버튼을 만들어 이벤트를 발생시켜서 저장된 값을 출력해 볼겁니다.
: state 와 함께 매개변수가 있는 updateValue() 라는 함수를 만들어줍니다.
updateValue() 는 setState()를 사용하여 state에 값을 저장하는 함수입니다.
이 때, setState
: (import는 당연히 해야합니다.)
import RandomNumber from './RandomNumber';
class App2 extends React.Component{
// 데이터를 저장할거야!! -> 생성자를 만들어야합니다.
constructor(props){ // 매개변수로 props를 받아서
super(props); //부모클래스인 Component도 초기화해줍니다.
//state값을 설정해봅니다!
this.state={
//카멜케이스 방식을 사용합니다. 헷갈리면 JSON 떠올리세요
//멤버변수 : 저장할값, 멤버변수2:값2
value:Math.round(Math.random()*100) //0~99
}
}
//this.state.value=저장할 값 < 이렇게는 표현하지 마세요, 오류는 안나지만 보안이나 형식상 오류가 있습니다.
// setState()를 통해서 저장해야합니다
updateValue(randomValue){ //매개변수가 있는 함수호출
this.setState({ //this.state값을 외부에서 변경시키는 Setter Method
value:randomValue
})
render(){
return(
<div>
<Header title={this.props.contentTitle}/>
<h1>컴포넌트 중첩 연습입니다.</h1>
<Content body={this.props.contentBody}/>
<RandomNumber number={this.state.value}/>
</div>
)
}
: RandomNumber는 부모객체로부터 값들을 받고, 함수도 부모의 것을 받아서 사용할 것입니다.
특히, 함수는 만들기는 생성자 밖에 만들지만, 생성자 내부에 bind 로 묶어줘야 사용이 가능합니다.
constructor() 내부에
형식) this.호출할 함수명 = this.호출함수명.bind(this)
import React from 'react';
export default class RandomNumber extends React.Component{
constructor(props){
super(props) //관례적으로 상속관계의 부모 Component에게 props를 전달해서 초기값- init
// 클래스 내부에서 선언된 method를 연결 시키는 구분!
//setState()와 연관이 있는 이벤트처리함수 > 연결코딩을 써줘야한다(바인딩)
//형식) this.호출할 함수명 = this.호출함수명.bind(this)
this.updateNumber = this.updateNumber.bind(this);
}
updateNumber(){ //부모의 함수는 updateValue 임
//부모컴포넌트의 함수를 호출해야 된다는 결론
//형식) 부모의함수명(,,,,)=>this.props.매개변수(자식이 값저장)
let value=Math.round(Math.random()*100);//0~99
this.props.onUpdate(value)//setState와 연관
}
render(){
return(
<div>
<h1>랜덤값:{this.props.number}</h1>
<button onClick={this.updateNumber}>랜덤값 출력</button>
<button onClick={this.props.onTest}>매개변수 없는 부모함수 호출</button>
</div>
)
}
// 매개변수가 없는 이벤트 처리 함수를 처리하기 위해 추가
test(){
alert('매개변수가 없는 부모함수 호출됨')
}
<RandomNumber number={this.state.value}
onUpdate={this.updateValue}
onTest={this.test} />
RandomNumber 컴포넌트에 각 매개변수에 값, 함수들을 넘겨줍니다.
자식객체인 RandomNumber 에서는 이제 props로 이 매개변수들을 접근해서 사용이 가능해집니다.
RandomNumber 컴포넌트의 updateNumber() 함수에 onUpdate(value)로
App2의 updateValue() 함수를 사용할 수 있게 되는겁니다.
App2.js RandomNumber.js
updateValue() - onUpdate(value) <-> onClick{this.updateNumber}
value - number <-> this.props.number
test() -onTest <-> onClick{this.onTest}