State

state 
- 내부에서 바뀔 수 있는 값을 의미 
1. 클래스형 컴포넌트가 가지고 있는 state 
2. 함수 컴포넌트에서 가지고 있는 useState라는 함수를 통해 사용하는 state

 

 클래스형 컴포넌트의 State

실습1

// counter.js
import { Component } from 'react'; 

class Counter extends Component {
    constructor(props){
        super(props); 
        // state의 초깃값 설정하기 
        this.state = {
            number:0    
        };
    } 
    render(){
        const { number } = this.state;
        return (
        <div>
            <h1>{number}</h1>
            <button
                //onclick를 통해 버튼이 클릭되었을때 호출할 함수를 지정 
                onClick={()=> {
                    // this.setState를 사용하여 새로운 값 할당 
                    this.setState({ number: number +1}); 
                }                
              }           
            >
                +1 
            </button> 
        </div>          
        ); 
     }
}

export default Counter;

// App.js
import Counter from './Counter'; 

const App = () => {
    return< Counter />  
};  
export default App;

 

실습2 state객체 안에 여러 값일 있을 때 

import { Component } from 'react'; 

class Counter extends Component {
    // 컴포넌트 생성자 메서드 
    // 클래스형에서 constructor를 만들 때는 super(props) 를 호출해야 한다 
    constructor(props){
        super(props);
        // state의 초기값 설정하기 
        this.state = {   
            number: 0, 
            fixedNumber: 0  
        }; 
    }
    render(){
        const { number, fixedNumber } = this.state; // state를 조회할 때는 this.state
        return(
            <div>
                <h1>바뀌는값: {number}</h1>
                <h1>바뀌지 않는 값: { fixedNumber }</h1>
                <button
                    // onClick를 통해 버튼이 클릭 되었을 때 호출할 함수 
                    onClick={ () => {
                            // this.setState를 사용하여 새로운 값을 넣을 수 있다 
                            this.setState({ number: number +1});                         
                    }}   
                >
                    +1                 
                
            
                </button> 
            </div>
        )  
    } 
}
export default Counter;

import Counter from './Counter'; 

const App = () => {
    return <Counter/> 
}

export default App;

 

 함수형 컴포넌트의 useState

 

실습1 

 

// Say.js

import { useState } from 'react'; 

const Say = () => {
    const [msg, setMsg] = useState(''); 
    const onClickEnter = () => setMsg('안뇽!!'); 
    const onClickLeave = () => setMsg('빠이!!');
    
    return(
        <div>           
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button> 
            <h1>{msg}</h1>
        </div> 
    ); 
}; 

export default Say;

// App.js

import Say from './Say';

const App = () => {
    return <Say/>; 
} 
export default App;

 

입장버튼을눌렀을때

퇴장버튼을눌렀을때