state , useState 사용하기

리엑트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

 

리엑트에는 두 가지 종류의 state가 있다.

 

• 클래스형 컴포넌트가 지니고 있는 state
• 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state

 

 

클래스형 컴포넌트의 state

 

import React, { Component } from 'react';

class Counter extends Component {
    constructor(props){
        super(props);
        // state의 초기 값 설정하기
        this.state = {
            number : 0
        };
    }

    render(){
        const { number} = this.state; 
        // state를 조회 할 때는 this.state로 조회합니다.
        return (
        <div>
            <h1>{number}</h1>
            <button onClick={ () => {
        //this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다.
                this.setState({number: number+1});
            }}> +1 </button>
        </div>
    );
    }
};

export default Counter;

 

 

컴포넌트에 state를 설정할 때는 다음과 같이 constructor 메서드를 작성하여 설정한다.

 

 constructor(props){
        super(props);
        // state의 초기 값 설정하기
        this.state = {
            number : 0
        };
    }

 

컴포넌트의 생성자 메서드인데 , 클래스 컴포넌트에서 constructor를 작성 할 때는

반드시 super(props)를 호출해 주어야 한다.

 

이 함수가 호출 되면 현재 클래스형 컴포넌트가 상속 받고 있는 

리엑트의 Component 클래스가 지닌 생성자 함수를 호출해 준다.

 

그 다음에 this.state 값에 초깃값을 설정 해준다.

컴포넌트의 state는 객체 형식이어야 한다.

 

 

render(){
        const { number} = this.state; 
        // state를 조회 할 때는 this.state로 조회합니다.
        return (
        <div>
            <h1>{number}</h1>
            <button onClick={ () => {
        //this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다.
                this.setState({number: number+1});
            }}> +1 </button>
        </div>
    );
    }

 

render 함수에서 현재 state를 조회할 때는 this.state를 조회하면 된다.

 

함수 내부에서는 this.setState 라는 함수를 사용 했는데 이 함수가 state 값을

바꿀수 있게 해준다.

 

---

state를 constructor에서 꺼내기

앞에서 state의 초깃값을 지정하기 위해 counstructor 메서드를 선언했는데,

또 다른 방식으로 state의 초깃값을 지정해 줄 수 있다.

 

import React, { Component } from 'react';

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

    render(){
        const { number} = this.state; 
        // state를 조회 할 때는 this.state로 조회합니다.
        return (
        <div>
            <h1>{number}</h1>
            <button onClick={ () => {
                //this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다.
                this.setState({number: number+1});
            }}> +1 </button>
        </div>
    );
    }
};

export default Counter;

이렇게 하면 constructor 메서드를 선언하지 않고도 state 초깃값을

설정 할 수 있다.

 

 

 

객체 대신 함수 인자 전달하기

import React, { Component } from 'react';

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

    render(){
        const { number} = this.state; 
        // state를 조회 할 때는 this.state로 조회합니다.
        return (
        <div>
            <h1>{number}</h1>
            <button onClick={ () => {
                //this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다.
                this.setState(prevState => {
                    return{

                        number : prevState.number+1
                    };
                });
             }}> +1 </button>
        </div>
    );
            }
};

export default Counter;

버튼 onclick 속성에

 

 onClick={ () => {
                this.setState({number: number+1});
            }}
   
            
 

this.state 객체 대신

 onClick={ () => {
           this.setState(prevState => {
                    return{
                    number : prevState.number+1
                    };
                });
             }} 

함수 인자를 넣어 줄 수 있다.