[React.js] Props & State

[props & state]

• props : 부모 컴포넌트가 자식 컴포넌트에게 주는 값, 자식 컴포넌트는 받아오기만 하고, 수정불가
• state: 컴포넌트 내부에 선언하고, 내부에서 값 수정가능

 

 

[Props]

- MyName.js

import React, {Component} from 'react';

class MyName extends Component {
    render(){
        return(
            <div>
                안녕하세요! 제 이름은 <b>{this.props.name}</b> 입니다.
                {/* 자신이 받아온 props 값은 this. 키워드를 이용해 조회가능 */}
            </div>
        );
    }
}

export default MyName;

-App.js

import React, {Component} from 'react';
import './App.css'
import MyName from './MyName'

class App extends Component {
  render() {
    return (
      <MyName name="리액트" />
    );
  }
}

export default App;

App.js 내 부모 컴포넌트 내 자식컴포넌트 태그에 props를 부여해 자식 컴포넌트에게 값을 전달한다.

 

[defaultProps]

props의 기본값 설정

- MyName.js

import React, {Component} from 'react';

class MyName extends Component {
    static defaultProps = {
        name: "기본이름"
      }
    
    render(){
        return(
            <div>
                안녕하세요! 제 이름은 <b>{this.props.name}</b> 입니다.
                {/* 자신이 받아온 props 값은 this. 키워드를 이용해 조회가능 */}
            </div>
        );
    }
}

export default MyName;

-App.js

import React, {Component} from 'react';
import './App.css'
import MyName from './MyName'

class App extends Component {
  render() {
    return (
      <MyName />
    );
  }
}

export default App;

[함수형 컴포넌트]

단순히 props만 받아와서 보여주는 컴포넌트인 경우

import React from 'react';

const MyName = ({name}) => {
    return (
        <div>
            제 이름은 {name}입니다.
        </div>
    );
};

export default MyName;

//App.js
class App extends Component {
  render() {
    return (
      <MyName name="홍길동"/>
    );
  }
}

---

[state]

동적인 데이터를 다룰때 사용

이벤트가 발생-> 해당 함수가 실행->state내 변수 값 변경

state 조회해서 변경

import React, {Component} from 'react';

class Counter extends Component {
    state = {
        number : 0
    } //class field

    // 생성자를 이용한 초기화
    // constructor(props) {
    //     super(props);
    //     this.state = {
    //       number: 0
    //     }
    // }

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

    render() {
        return(
            <div>
                <h1>Count</h1>
                <div>값 : {this.state.number}</div>
                <button onClick={this.handleIncrease}>+</button>
                <button onClick={this.handleDecrease}>-</button>
            </div>
        )
    }

}

export default Counter

 

=>가 아닌 함수로 정의한 경우

    constructor(props) {
        super(props);
        this.state = {
            number: 0
        }
        this.handleIncrease = this.handleIncrease.bind(this); 바인드 필요
        this.handleDecrease = this.handleDecrease.bind(this);
    }

    //=>가 아닌 단순 함수를 나열하게 되면 생성자(Constructor) 내부에 이벤트와 함수간 bind 설정이 필요하다.
    //=>를 사용한 함수 정의는 자동으로 이를 맵핑해 준다.
    handleIncrease() {
        this.setState({
          number: this.state.number + 1
        });
    }

 

비구조화 할당: this.state 조회 없이 state값 변경

import React, {Component} from 'react';

class Counter extends Component {
    state = {
        number : 0
    } //class field

    //this.state 조회 없이 state값 변경
    // handleIncrease = () => {
    //     this.setState(
    //         (state) => ({
    //           number: state.number
    //         })
    //       );
    // }

    //비구조화 할당
    handleIncrease = () => {
        const {number} = this.state;
        this.setState({          
            number: number+1
        });
    }

    handleDecrease = () => {
        this.setState(
            ({number}) => ({
                number: number - 1
            })
        );
    }
    //다양한 방법으로 setState 내부 함수를 설정할 수 있다.
   

    render() {
        return(
            <div>
                <h1>Count</h1>
                <div>값 : {this.state.number}</div>
                <button onClick={this.handleIncrease}>+</button>
                <button onClick={this.handleDecrease}>-</button>
                {/* onClick 내부에는 함수이름을 써야한다.  */}
            </div>
        )
    }

}

export default Counter

버튼 클릭시 비동기적으로 이벤트 발생