react.js 시작하기 190802 - props, state

다시 한번 더 정리 하즈아

영역을 살펴보까

class App extends Component {
  //function 
  render() {
    //javascript code
    return (//jsx language
      <div>
        <h3>져는 APP인대여 ㅇㅅㅇ!!!!</h3>
       <Bpp/> 
      </div>
    );
  }
}

클래스 내부면 변수와 함수를 선언 할 수 있다.

render에서는 javascript code를 사용할 수 있다.

return뒤에서는 jsx language를 사용할수있다.

 

뻑뻒뻑

class Bpp extends Component {
  render() {
    console.log(this.props.name);
    this.props.age = 5 //props의 갱신 안됨
    return (
      <div>
        <center>
          <h3>{this.props.age}쨜 ㅇ 3ㅇ </h3>
          <h2>{this.props.name}이라고 햄</h2>
          <h1>{this.props.hello ? `안냥`:`잘가`}</h1>
        </center>
      </div>
    );
  }
}

props는 데이터를 갱신할 수 없다.

const로 볼수는 없다.

props는 받았을 경우에 갱신이 불가한다는 것이다. 부모가 갱신해줘야한다 무조건

자식 자체는 갱신 할 수 없다. (걍 방법이 없음 걍 안됨 하지마)

 

state

props와는 달리 값을 갱신시킬수 있다.

component안에서 만들고 정의한다.

class App extends Component {
  state = {                 //state는 객체로 정의한다. 여기는 초기화 하는 부분
    n1:0
  }
  render() {
    return (
      <div>
        <h1>져는 APP인대여 ㅇㅅㅇ!!!!</h1>
        <h3>{this.state.n1}</h3>
       <Bpp/> 
      </div>
    );
  }
}

state사용법은 this.state.변수명 이렇게 사용하면 된다.

갱신을 시킬수는 있는데 단독으로 갱신 ㄴㄴ

반드시 형식을 갖추어서 갱신시켜야한다

class App extends Component {
  state = {
    n1:0,
    n2:100,
    n3:true,
    n4: this.n3 ? this.n2:this.n3,
  }
  f1= ()=>{
    this.setState({
      n1 : this.state.n1+1
    })
    console.log(`하희!!!`+this.state.n1);
  }
  render() {
    return ( ~~~

함수를 만들고 거기에서 this.setState({   })를 하면

여기에 있는 state가 바뀌게 된다.

setState는 반드시 형식을 갖춘 객체로 정의해주어야 한다.

setState함수는 반드시 render()함수를 콜한다. (그래서 html이 변함)

class App extends Component {
  state = {                 //state는 객체로 정의한다. 여기는 초기화 하는 부분
    n1:0,
    n2:0,
    n3:true,
    n4: this.n3 ? this.n2:this.n3
  }
  //여기도 class기 때문에 변수선언이 가능하다
  n2 = 0

  f1= ()=>{ //함수 호출될때마다 n1이 증가 했으면 좋겠다.//this.state.n1++;
    this.setState({//이 객체로 뭔가 정의해서 던져줄테니까 여기서 변경한것을 적용해라
      n1 : this.state.n1+1  //n1에다가 n1의 값을 1개 넣어주세요!
      //n2 : this.state.n2 +`!`
    })
    console.log(`하희!!!`+this.state.n1);
    this.n2++ //이거능 안된다.
    console.log(this.state.n1,`---`,this.state.n2);
    
  }
  render() {
    return (
      <div>
        <h1>져는 APP인대여 ㅇㅅㅇ!!!!</h1>
        <h3>n1 {this.state.n1}</h3>
        <h3>n2 {this.state.n2}</h3>
        <h3>{this.state.n4} 출력</h3>
       <Bpp/> 
       <button onClick={this.f1}>plus++</button>
      </div>
    );
  }
}

props와 state의 차이

	props	state	field
값 갱신 가능	값 갱신 불가	setState({ }) 사용해서 가능	화면에 보이지 않는 내부적으로만 사용할 경우에 사용.
어디서 주냐	상위 컴포넌트가 줘야함	컴포넌트 자체에서 초기화
*		마지막에 render() 호출

가장 큰 차이는 마지막에 render()를 호출하느냐 안하느냐이다

class App extends Component {
  state = {                 //state는 객체로 정의한다. 여기는 초기화 하는 부분
    n1:0,
    n2:100,
    n3:true,
  }

  n2 = 0
  f1= ()=>{ 
    this.setState({
      n1 : this.state.n1+1 
    })
    console.log(`f1 call!`+this.state.n1);
  }

  f2= ()=>{ 
    this.n2++           //이거능 안된다.
    console.log(`f2 call!`+this.state.n2);
  }

  render() {
  console.log(`asdfasdfasdf`);
    return (
      <div>
        <h1>져는 APP인대여 ㅇㅅㅇ!!!!</h1>
        <h3>n1 {this.state.n1}</h3>
        <h3>n2 {this.state.n2}</h3>
       <Bpp/> 
       <button onClick={this.f1}>plus++</button>
       <button onClick={this.f2}>plus++</button>
      </div>
    );
  }
}
class Bpp extends Component {
  render() {
    return (
      <div>
        <h3>져는 BPP애오 ㅇㅂㅇ</h3>
      </div>
    );
  }
}

화면에서 console출력부분을 보면

f1 버튼은 누를때마다 마지막에 render()가 호출된다.

f2 버튼은 값도 변경되지 않고 render()도 호출되지 않는다.

사진을 보면 f1을 부를때만 render의 log가 출력됨을 알수 있다.

  f1= ()=>{ 
    this.setState({
      n1 : this.state.n1+1 
    })
    console.log(`f1 call!`+this.state.n1);
  }

함수와 찍힌 로그를 자세히보면 setState가 state에 적용시키는 시점을 알 수 있다.

분명 setState에서 +1을했음에도 불구하고 0이찍혔다

즉 setState는 비동기함수이다 -> 다음랜더링되기전까지 언제될지는 모른다.

그렇다면 다음 render()에서 한번 불러보자

render() {
  console.log(`asdfasdfasdf`,this.state.n1);
    return (

랜더 아래에 log를 추가한다.

보면 render()에서 찍은 n1은 1이찍혔다

 

render를 불렀을때 완전한 초기화가 된다고 생각하면 될 것 같다.