[React] props와 state를 활용한 예제

[해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다.
따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.]

 

저번 포스팅에서 설명한 props와 state를 활용해 간단한 예제를 만들어보도록 하자.

 

문제

App Component엔 동물 3마리를 담을 수 있는 배열이 존재하며, 랜덤으로 값을 저장할 수 있는 변수가 존재한다고 하자. Bpp Component는 App로부터 동물 배열을 받고, 버튼을 생성하여 누르면 랜덤 값을 App로부터 지속적으로 받아 동물 배열의 Index를 바꿔가며 실시간으로 View에 동물 이름을 출력한다.

 

그러면 설계를 다음과 같이 할 수 있을것이다.

 

동물을 담을 수 있는 배열은 변동이 없으므로 고정으로 놓고 사용해도 문제가 없다. 문제는 랜덤 값이다. Bpp는 App로부터 랜덤 값을 버튼을 클릭할 때마다 받아와야 한다. 또한 받아온 값을 통해 View에 지속적으로 Update를 해줘야 한다.

 

그러면 App와 Bpp에는 state가 필요한 것을 알 수 있다.

App엔 값을 랜덤으로 발생시키는 함수를 생성하고 setState를 통해 render()를 호출하여 Bpp에 알려줘야 한다.

그럼 App에서 setState를 어떻게 작동시킬까? 바로 setState를 호출하는 함수를 Bpp로 넘기면 된다. 즉 다음과 같은 코드가 완성된다.

 

class App extends Component {

  arr = ['호랑이', '독수리', '앵무새'];

  state = {
    value : 0,
  }

  changeValue = () => {
    this.setState({
      value : parseInt(Math.random() * 3),
    });
  }

  render() {
    return (
      <div>
        <Bpp arr = {this.arr} value = {this.state.value} changeValue = {this.changeValue}></Bpp>
      </div>
    );
  }
}

 

이번엔 Bpp로 넘어가 보자.

Bpp는 App로부터 받아온 값을 변경하고 이를 View에 적용시키기 위해 state를 만들어 setState를 호출해야 한다. 배열은 단순히 props를 통해 받아와 고정시키면 된다.

남은 건 View를 지속적으로 Update를 시킬 수 있는 버튼 이벤트의 함수를 만드는 것이다. 중요한 것은 Bpp는 App로부터 바뀐 랜덤 값을 받아와야 한다. 따라서 Bpp의 함수는 App의 setState()를 호출할 수 있는 함수를 동작시키며, App로부터 변경된 값을 자신이 받아와 render()를 호출해야 한다.

그러면 다음과 같은 함수를 생성할 수 있다.

 

changeValue = () => {
  this.props.changeValue();

  this.setState({
    value : this.props.value,
  });  
}

 

그러면 App로부터 받아온 랜덤 값 0~2까지 받아 최신화시켜준 후, 동물 배열의 Index를 지정하면 다른 동물 이름이 나오게 된다.  해당 함수를 Bpp의 버튼 이벤트에 등록하고 버튼을 누르면, 화면엔 동물들이 랜덤으로 출력될 것이다.

 

 

전체 코드

import React, { Component } from 'react';

class App extends Component {

  arr = ['호랑이', '독수리', '앵무새'];

  state = {
    value : 0,
  }

  changeValue = () => {
    this.setState({
      value : parseInt(Math.random() * 3),
    });
  }

  render() {
    return (
      <div>
        <Bpp arr = {this.arr} value = {this.state.value} changeValue = {this.changeValue}></Bpp>
      </div>
    );
  }
}

class Bpp extends Component {

  arr = this.props.arr;

  state = {
    value : 0,
  }

  changeValue = () => {
    this.props.changeValue();

    this.setState({
      value : this.props.value,
    });
    
    console.log(this.arr[this.state.value]);
    
  }

  render() {
    return (
      <div>
        <h1>{this.arr[this.state.value]}</h1>
        <button onClick = {this.changeValue}>Click</button>
      </div>
    );
  }
}

export default App;