React #3 props & state

#1 props (Property)

상위 컴포넌트의 속성을 변수처럼 가져와서 사용할 수 있습니다.

컴포넌트 내부의 불변한 데이터 (Immutable Data)를 사용할 때 이용합니다.

 

this.props.속성이름 으로 접근 할 수 있으며

속성 말고 태그 사이에 데이터를 가져오고 싶다면 this.props.children 을 통해 가져올 수 있습니다.

this.props.children에는 <Cpnt> 여기에 있는 값 </Cpnt> 이 들어가게 됩니다.

안녕하세요 name prop에요 여기가 children 값입니다

 

class Hello extends React.Component{
    render() {
        return(
            <div>
                <h1> 안녕하세요 {this.props.name}</h1>
                <div> {this.props.children} </div>
            </div>
        )
    }
}


class App extends React.Component{
    render() {
        return(
            <Hello name="name prop에요"> 여기가 children 값입니다. </Hello>
        );
    }
}

참고로 App 객체에서도 props를 사용 할 수 있습니다.

class App extends React.Component{
    render() {
        return(
            <Hello name={this.props.name}> {this.props.children} </Hello>
        );
    }
}

ReactDOM.render(<App name="안뇽"> 여기는 children </App>.document.getElementById('root'));

 

---

#1-1 defaultProps

컴포넌트에서 .defaultProps = { } 를 이용해 default 속성 값을 지정 할 수 있습니다.

class App extends React.Component{
    render() {
        return(
            <Hello name={this.props.value}> {this.props.str} </Hello>
        );
    }
}

App.defaultProps  = {
    value : 0,
    str : "Hello"
}

---

# 1-2 propTypes

디폴트 값과 마찬가지로, 기본 타입을 설정하여 잘못된 값이 들어왔을 때 렌더링 경고를 띄울 수 있습니다.

단순히 string, number같은 타입 지정 이외에도 다양하게 기본 입력 형식을 설정 가능합니다.

App.prototype = {
    value: React.PropType.string,
    value2:React.PropType.number,
    value3:React.PropType.any.isRequired // 필수입력. 이런 기능도 있습니다.
}

---

#2 State

컴포넌트에서 유동적인 데이터를 사용할 때 사용합니다.

{ this.state.name } 으로 사용하며 생성자( constructor( ) )에서 초기값 설정이 필수입니다.

컴포넌트 내부에서 값을 변경하고 싶다면 this.setState( {...} ) 를 사용하며 초기값이 없다면 랜더링 오류가 뜹니다.

 

물론 랜더링 이후에 this.state = "~" 로 강제로 값을 변경할 수는 있지만

그러면 리액트의 가상DOM을 사용하는 이유가 없어지므로 생성자 밖에서는 절대 사용해서는 안되는 방법입니다.

class Counter extends React.Component{
    constructor(props) { 
    // 생성자를 오버라이딩할 경우, super(props)를 전달해줘야 this.props가 정상 작동됩니다. 
        super(props);
        this.state = {
            value:0 // state는 초기화하지 않으면 랜더링 되지 않습니다.
        }
    }

    render() {
        return(
            <div>
                <h2>{this.state.value}</h2>
            </div>
        )
    }
}

 

# 2-1 이벤트 연결

자바스크립트의 이벤트와 동일합니다.

컴포넌트 객체 안에 이벤트를 처리할 메서드를 만들고 해당 태그의 이벤트 속성에 연결 한 후

state값을 this.setState( {key:value} ) 로 변경해주면 됩니다.

 

다만, 이벤트를 처리하는 메서드에서 this.state를 사용하면 object.state로 취급되기에 사용 할 수 없습니다.

사용하고 싶다면 이벤트 속성을 연결할 때 { this.메서드.bind(this) } 로 지정해주어야 합니다.

class Counter extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            value:0
        }
    }

    handleClick(){ // 이벤트를 처리할 메서드는 컴포넌트 객체안에 작성합니다.
     // this.state = "value" 로 변경해서는 안됩니다. 가능은 하지만 가상DOM을 쓰는 의미가 없어집니다.
        this.setState({
            value:this.state.value + 1 // this를 bind시켜줘야 사용가능합니다.
        });
    }

    render() {
        return(
            <div>
                <h2>{this.state.value}</h2>
                <button onClick={this.handleClick}>클릭!</button>
                <button onClick={this.handleClick.bind(this)}> this사용가능 클릭! </button>
            </div>
        )
    }
}

다만 bind는 생성자(constructor)에도 가능하므로, 생성자에 하는게 컨벤션상 보기에 좋습니다.

class Counter extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            value:0
        }
        this.handleClick = this.handleClick.bind(this);
    }
/* ... 이하 코드 생략 ... */
}