React(Class) - 다른 compoment에 function전달
이번에는 버튼을 만들어서 버튼을 누르면 state의 상태에서 입력된 id가 삭제되도록 하겠다.
import React, { Component } from 'react'
import Newcompoment from './compoments/New_compoment';
export class App extends Component {
constructor(props){ // constructor를 만들어 props를 전달
super(props); // 기존의 props 유지
this.state = { // class이기 때문에 this를 사용
fruit : [ // 실제 상태를 바꿀 state.fruit
{ id: 0, post : 'apple'},
{ id: 1, post : 'banana'}
]
};
// del_state가 제대로 전달되도록 bind한다.
this.del_state = this.del_state.bind(this);
}
// del_state는 state.fruit에서 선택된 id를 제거한다.
del_state = (id) => {
this.setState({
fruit : this.state.fruit.filter((ele) => ele.id !== id)
})
}
render() {
return (
<div>
<Newcompoment fruit = {this.state.fruit} del_state = {this.del_state}/>
</div> // New_compoment에 props로 state.fruit와 del_state함수를 전달한다.
)
}
}
export default App
이전에 작성한 Newcompoment(기존 New_compoment)에 추가로 'del_state = {this.del_state}'를 추가한다. 이는 기존의 props에서 del_state함수를 추가한 것이다.
import React, { Component } from 'react';
import Printfruit from './Print_fruit'; // Print_fruit를 갖고온다
export class New_compoment extends Component {
constructor(props){
super(props);
// state는 text에 쓰는 내용을 항상 반영한다.
this.state = {
id : ''
};
// onChange 반영
this.onChange = this.onChange.bind();
}
// onChange는 Client가 text에 입력하는 것을 state.id에 바로 반영
onChange = (e) => {
this.setState({
id : e.target.value
})
}
render(props) {
return (
<div>
{this.props.fruit.map((ele) => {
return <Printfruit key = {ele.id}fruit = {ele}/>
// map method를 사용하여 fruit의 갯수만큼 태그를 생성
// key값을 ele.id로 입력한다.
})}
<input
type = 'text'
name = "id"
value = {this.state.id}
onChange = {this.onChange}/>
<button
onClick = {() =>
// 입력은 문자열이기 때문에 정수(parseInt)로 변환
this.props.del_state(parseInt(this.state.id))}>
id삭제
</button>
</div>
)
}
}
export default New_compoment
위 코드에서 input부분을 설명을 하겠습니다.
type : 입력타입
name : state에 해당되는 키값
value : 사용자가 입력한 값을 반영
onChange : 입력창이 변경시 onChange함수 실행
사용자가 text를 입력하면 onChange에 의해 state에 있는 id값이 같이 변경이 됩니다. 이때 name으로 식별을 하게 됩니다.
이제 App.js에 있는 del_state function에 의해 state.fruit상태가 변경된 것을 확인할수 있습니다.
그리고 del_state는 props로 Newcompoment로 전달되고 실행 된 것을 확인할수 있었습니다.
이전글 : React(Class) - 다른 compoment에 state전달
댓글
댓글 쓰기