갑자기 분위기 react 🔍(2)

props & state

리액트 컴포넌트에서 다루는 데이터

🔍 props

부모 컴포넌트 -> 자식 컴포넌트에게 주는 값
자식 컴포넌트에서는 props를 받기만 하고 값을 직접 수정할 수 없다!

🔍 state

class fields 문법을 사용해서 정의
동적인 데이터를 다룰 때 사용함 (메소드 작성)
컴포넌트 내부에서 선언하며 값을 변경할 수 있다.

this.setState

• state 에 값을 바꾸기 위해 사용하며 이 함수가 호출되면 컴포넌트 리렌더링 됨
• 객체로 전달되는 값만 업데이트

import react, { Component } from 'react';

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

    handleIncrease = () => {
        const { number } = this.state;
        this.setState({
            number: number + 1
        });
    }
    handleDecrease = () => {
        this.setState({
            number: this.state.number - 1
        });
    }
    render() {
        return (
            <div>
                <h1>카운터</h1>
                <div>값: {this.state.number}</div>
                <button onClick={this.handleIncrease}>+</button>
                <button onClick={this.handleDecrease}>-</button>
            </div>
        );
    };
}

export default Counter;

위 코드로 요런 카운터를 만들 수 있다! 재밌엉..

누구든지 하는 리액트 props와 state