react.js 시작하기 190806 - 복습1

class App extends Component {
  render() {
    return (
      <div>
        <h1>App.js App</h1>
        <Bpp/>{/*이걸 상속으로 볼수 있는가?*/}
      </div>
    );
  }
}

1. props

2. state : 컴포넌트 내부에서 사용되는 변수!

 

react는 전체를 통틀어 저 두개 가지고 장난치는 거당~

 

3. event : 함수 콜

 

import React, { Component } from 'react';
class App extends Component {
  n1 = 10;        //그냥 필드이름만 주면 됨
  state = {
    n2 : 20
  }
  f1 = ()=>{
    console.log(`f1 call`);
  }
  render() {
    return (
      <div>
        <h1>App.js</h1>
        <Bpp n1={this.n1} state={this.state} f1={this.f1} />

      </div>
    );
  }
}
class Bpp extends Component {
  
  render() {
   console.log(this.props.state);//이거는 된다.
    return (
      <div>
        <h2>Bpp 불러따</h2>
        <h3>{this.props.n1}</h3>
        <h2>{this.props.state.n2}</h2>
        <button onClick={this.props.f1}>f1</button>
        {/* state 객체를 직접 여기에 찍는 것은 안된다. */}
      </div>
    );
  }
}

export default App;

머 이렇게 쓴다

걍 기억나는대로 해봄

 

 

자이제 클릭하면 배열에있는 값이 랜덤으로 출력되는 코드를 작성해보자

import React, { Component } from 'react';

class App extends Component {
  arr =[`토끼`,`고양이`,`멍멍이`,`똥아지`] 
  state = {
    temp : '덩물',
    random : ()=>{
      let num = Math.floor(Math.random()*3)
      //Math.floor(Math.random()*3)+1 //이건 랜덤 
      return this.arr[Math.abs(num)]
    },
    setTemp:()=>{
      this.setState({
        temp:this.state.random()
      })
    },
  }  
  render() {
    return (
      <div>
        <h1>App.js</h1>
      <Bpp state = {this.state}/>
      </div>
    );
  }
}
class Bpp extends Component {
  
  render() {
    return (
      <div>
        <h1>Bpp</h1>
        <h2>{this.props.state.temp}</h2>
        <button onClick={this.props.state.setTemp}>동물 쏸!</button>
      </div>
    );
  }
}
export default App;

찍어주쟈

 

승샘해주신거

import React, { Component } from 'react';

// 부모 컴포넌트 필드, 함수, 스테이트 사용
class App extends Component {
  state = {
    num:0
  }
  f1 = ()=>{ 
    //console.log('App f1 Call');
    this.setState({
      num:Math.floor(Math.random()*3)
    })
  }

  animal = ['호랑이', '코끼리', '독수리']

  render() {
    //console.log('render call 1');
    return (
      <div>
        <Bpp animal ={this.animal[this.state.num]} f1={this.f1}/>
      </div>
    );
  }
}

class Bpp extends Component {
  render() {
    //console.log('render call 2');
    console.log(this.props);
    return (
      <div>
        <button> {this.props.animal} </button>{/* 동물이름 자체가 간다 
        자식의 액션으로 부모가 변화할수있다 이게 주제임

        */}
        <button onClick={this.props.f1}>버튼1</button>
      </div>
    );
  }
}
export default App