Engineering_S/W & H/W

 이번에는 버튼을 만들어서 버튼을 누르면 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.fru...

  import React , { Component } from 'react' import New_compoment 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' } ] }; } render () { return ( < div > < New_compoment fruit = {this . state . fruit } /> </ div > // New_compoment에 fruit state 전달 ) } } export default App 위의 코드에서 state를 추가하며 New_compoment에 fruit라는 props를 전달한다. import React , { Component } from 'react' export class New_compoment extends Component { render ( props ) { return ( < div > { console . log ( this . props . fruit ) /*props 확인*/ } </ div > ...

React는 여러 compoments들이 모여서 만들어진다. 이때 각각의 compoment들에 정보 또는 메소드가 제공되고 거기에 따라 동작하게 해야한다. 일단 React를 설치하고 진행하도록 하겠습니다. 위 사진처럼 'Happy hacking!'이 나오면 제대로 설치가 된 것입니다. import React , { Component } from 'react' export class App extends Component { render () { return ( < div > </ div > ) } } export default App src폴더에 있는 App.js를 위와 같이 변경합니다. src폴더에 compoments폴더를 생성합니다. 그리고 그안에 New_compoment.js을 생성합니다. (아래코드 참고) import React , { Component } from 'react' export class New_compoment extends Component { render () { return ( < div > < h1 > Hello World! </ h1 > </ div > ) } } export default New_compoment 위 코드에서 div 태그 안에 h1테그가 있는것을 알수 있습니다. 이안에 "Hello World!"를 입력해 줍니다. import React , { Component } from 'react' import New_compoment from './compoments/New_compoment' ; export class App extends Co...