[React] (2) props & state

2020. 3.16

React Basic - (2) props & state

React Component 의 Data

props : 부모 Component → 자식 Component로 전달하는 값. 자식 Component에서는 props 값을 변경할 수 없다.
state : Component 내부에서 선언하며, state 값 변경 가능

props 다루기 - 클래스형 컴포넌트 & defaultProps

Myname.js

import React, {Component} from 'react';

class Myname extends Component {
    // props 값을 기본 지정할 수 있음. (누락 방지) - (1)
    static defaultProps = {
        name : "default"
    }
    render () {
        return (
        <div>My name is <b>{this.props.name}</b></div> 
        );
    }
}
export default Myname;

App.js

class App extends Component {
    render() {
      return (
        <Myname name="리액트"></Myname>
      );
    }
}
// props 값을 기본 지정할 수 있음. (누락 방지) - (2)
Myname.defaultProps = {
  name : 'default'
};

export default App;

props 다루기 - 함수형 컴포넌트

Myname.js

// 함수형 컴포넌트로 간단하게 작성 가능
const Myname = ({name}) => {
    return (
        <div>My name is {name}</div>  
    );
}
export default Myname;

State 다루기

state : 동적인 data를 다룰 때 사용됨.

Counter.js

import react, {Component} from 'react';

class Counter extends Component {
    // Component의 state를 정의할 때는 class field를 사용함
    state = {
        number : 0
    }
    // Component에 method 작성
    handleIncrease = () => {
        this.setState({
            number: this.state.number +1
        });
    }
    handleDecrease = () => {
        this.setState({
            number : this.state.number -1;
        });
    }

    // handleIncrease() {
    //     this.setState({
    //       number: this.state.number + 1
    //     });
    //   }
    // // 이렇게 작성한 경우, this가 undefined라고 인식됨 : 
    // => 화살표 함수를 사용하여 함수명에 () 익명함수를 할당해야 함

    render() {
        return (
            <div>
                <h1>Counter : </h1>
                <div>Value : {this.state.number}</div>
                <button onClick={this.handleIncrease}>+</button>
                <button onClick={this.handleDecrease}>-</button>
            </div>
        )
    }
}
export default Counter;

App.js

return (
        <Fragment>
            <Myname name="리액트"></Myname>
            <Counter></Counter>
        </Fragment>
      );

SetState

state 값을 변경하기 위해 반드시 거쳐야 하는 함수.

SetState() 괄호 안에 전달되는 객체만 업데이트 됨.

Variation

// 1.
this.setState({
    number: this.state.number + 1
});

// 2.
this.setState((state) => ({
		number: state.number + 1
}));

// 3. 비구조화 할당 문법
this.setState(({number}) => ({
    number: number + 1
}));

handleIncrease = () => {
    const { number } = this.state;
    this.setState({
      number: number + 1
    });
  }

  handleDecrease = () => {
    this.setState(
      ({ number }) => ({
        number: number - 1
      })
    );
  }

React에서 이벤트 함수 설정 시 주의사항 !

onClick 과 같은 이벤트 이름은 camelCase 방식으로 작성해야 한다.
이벤트에 전달하는 값은 함수여야 한다.

onClick={this.handleIncrease()} 이 아니라,

onClick={this.handleIncrease} 형태로 작성해야 함 !