React 활용하기(state)

(10) state를 알아봅시다 - 1

props를 알아봤으면, 이제 state를 알아봐야죠

state

1) 컴포넌트에서 유동적인 데이터를 다룰 때, state 를 사용합니다.
: React 어플리케이션을 만들 땐, state를 사용하는 컴포넌트의 갯수를 최소화하도록 해야합니다.

예를들어, 10 개의 컴포넌트에서 유동적인 데이터를 사용하게 될 땐, 각 데이터에 state를 사용 할 게 아니라, props 를 사용하고 10 개의 컴포넌트를 포함시키는 container 컴포넌트를 사용하는것이 효율적입니다

2) state 의 초기 값을 설정 할 때는 constructor(생성자) 메소드에서 this.state= { } 를 통하여 설정합니다.

3) state 를 렌더링 할 때는 { this.state.stateName } 을 사용합니다.

4) state 를 업데이트 할 때는 this.setState() 메소드를 사용합니다.
: ES6 class에선 auto binding이 되지 않으므로, setState 메소드를 사용 하게 될 메소드를 bind 해주어야 합니다.
        : (bind 하지 않으면 React Component 가 가지고있는 멤버 함수 및 객체에 접근 할 수 없습니다.)

App2에 state를 저장하고, RandomNumber.js 에서 버튼을 만들어 이벤트를 발생시켜서 저장된 값을 출력해 볼겁니다.

1) App2.js에 constructor() 를 만들고 초기화합니다.

: state 와 함께 매개변수가 있는 updateValue() 라는 함수를 만들어줍니다.

updateValue() 는 setState()를 사용하여 state에 값을 저장하는 함수입니다.
이 때, setState

2) App2.js 의 render() 에 RandomNumber 컴포넌트를 추가하고 state를 전달해줍니다.

: (import는 당연히 해야합니다.)

import RandomNumber from './RandomNumber';
class App2 extends React.Component{  
    // 데이터를 저장할거야!! -> 생성자를 만들어야합니다.
    constructor(props){ // 매개변수로 props를 받아서
        super(props); //부모클래스인 Component도 초기화해줍니다.
        //state값을 설정해봅니다!
        this.state={
            //카멜케이스 방식을 사용합니다. 헷갈리면 JSON 떠올리세요
            //멤버변수 : 저장할값, 멤버변수2:값2
            value:Math.round(Math.random()*100) //0~99
        }
    }
    //this.state.value=저장할 값  < 이렇게는 표현하지 마세요, 오류는 안나지만 보안이나 형식상 오류가 있습니다. 
    // setState()를 통해서 저장해야합니다
    updateValue(randomValue){ //매개변수가 있는 함수호출
       this.setState({   //this.state값을 외부에서 변경시키는 Setter Method
           value:randomValue
       })
    
   render(){ 
        return(
   	        <div>
       	        	<Header title={this.props.contentTitle}/>
           	    	<h1>컴포넌트 중첩 연습입니다.</h1>
               		<Content body={this.props.contentBody}/>   
               		<RandomNumber number={this.state.value}/>
                </div>
        	)
    	}

3) RandomNumber.js 를 작성합니다.

: RandomNumber는 부모객체로부터 값들을 받고, 함수도 부모의 것을 받아서 사용할 것입니다.
특히, 함수는 만들기는 생성자 밖에 만들지만, 생성자 내부에 bind 로 묶어줘야 사용이 가능합니다.

부모 -> 자식 : 부모의 함수를 호출할 수 있도록 props를 이용해서 함수를 전달합니다.

constructor() 내부에
형식) this.호출할 함수명 = this.호출함수명.bind(this)

import React from 'react';

export default class RandomNumber extends React.Component{
    constructor(props){
        super(props) //관례적으로 상속관계의 부모 Component에게 props를 전달해서 초기값- init
        // 클래스 내부에서 선언된 method를 연결 시키는 구분!
        //setState()와 연관이 있는 이벤트처리함수 > 연결코딩을 써줘야한다(바인딩)
        //형식) this.호출할 함수명 = this.호출함수명.bind(this)
        this.updateNumber = this.updateNumber.bind(this);

    }
    updateNumber(){ //부모의 함수는 updateValue 임
        //부모컴포넌트의 함수를 호출해야 된다는 결론
        //형식) 부모의함수명(,,,,)=>this.props.매개변수(자식이 값저장)
        let value=Math.round(Math.random()*100);//0~99
        this.props.onUpdate(value)//setState와 연관
    }
 render(){
        return(
            <div>
 		<h1>랜덤값:{this.props.number}</h1>
                <button onClick={this.updateNumber}>랜덤값 출력</button>
                <button onClick={this.props.onTest}>매개변수 없는 부모함수 호출</button>
	    </div>
	)
}

4) 부모에서 값(데이터,함수)을 전달해줍니다. (코드 추가)

 // 매개변수가 없는 이벤트 처리 함수를 처리하기 위해 추가
    test(){
        alert('매개변수가 없는 부모함수 호출됨')
    }

<RandomNumber number={this.state.value}
              onUpdate={this.updateValue}
              onTest={this.test} />

RandomNumber 컴포넌트에 각 매개변수에 값, 함수들을 넘겨줍니다.
자식객체인 RandomNumber 에서는 이제 props로 이 매개변수들을 접근해서 사용이 가능해집니다.

RandomNumber 컴포넌트의 updateNumber() 함수에 onUpdate(value)로
App2의 updateValue() 함수를 사용할 수 있게 되는겁니다.

정리를 해보자면!

App2.js                                           RandomNumber.js
updateValue() - onUpdate(value) <-> onClick{this.updateNumber}
value            - number             <-> this.props.number
test()             -onTest               <-> onClick{this.onTest}