[React] State 사용하기

컴포넌트의 동적 데이터 State 

 

이전까지 사용한 props의 경우에는 컴포넌트 사이의 전달하는 데이터로 부모 컴포넌트(ex. App.js)에서만 설정이 가능했는데,

읽기 전용인 props 대신 동적으로 사용 가능한 데이터인 state에 대해 알아보고자 한다

 

class 컴포넌트와 function 컴포넌트에서 state의 초기값을 지정하는 부분이 다르니,

해당 부분은 각각의 설명을 참고하는 것이 좋다

 

[ Class State의 기본 구조 및 예제]

class StateComp extends Component {
    constructor(props){
        super(props);
        this.state = { // (1)
            stateString : 'react',
            stateNumber : 501
        }
    }

    stringChange = () =>{
        this.setState({stateString:'리액트'}); // (2)
    }

    numberChange = () =>{
        this.setState({stateNumber:502}); // (2)
    }

    render(){
        return(
            <>  {/*(3)*/}
                <button onClick={() => {this.stringChange()}>state String 변경</button> <br/>
                <button onClick={() => {this.numberChange()}>state Number 변경</button> <br/>
                {/*(4)*/}
                StateString : {this.state.stateString} <br/>
                StateNumber : {this.state.stateNumber}
            </>
        )
    }
}

(1) state는 constructor에서 초기값을 지정하여 사용 가능하며, class형에는 this를 붙여서 표현해야 함 (function형에는 붙지 않음)

(2) state에서 값을 변경하고자 한다면 setState를 통해서 변경이 가능하며, 리액트에서 제공하는 함수

stringChange = () =>{
    this.setState({stateString:'리액트'});
        
    // this.state.stateString = '리액트'; (변경x)
}

- 그냥 변수에 값을 넣어주는 형식으로는 값이 변하지 않음

 

(3) onClick의 경우 함수를 호출시켜 주는 것이 아닌 함수의 이름을 매칭해 주는 것 이므로 위의 코드도 가능하나 아래와 같이 같단하게 작성도 가능함

 render(){
        return(
            <>
                <button onClick={this.stringChange}>state String 변경</button> <br/>
                <button onClick={this.numberChange}>state Number 변경</button> <br/>
                StateString : {this.state.stateString} <br/>
                StateNumber : {this.state.stateNumber}
            </>
        )
    }

(4) state를 호출할 때에는 state.변수명으로 호출이 가능

 

---

Class 컴포넌트에서는 constructor를 통해서 state의 초기값을 지정해 주었는데, 함수형 컴포넌트에서는 이가 불가능함

이를 위해 도입된 Hooks 중 하나인 useState를 사용하여 function 컴포넌트에서도 state를 사용할 수 있다

 

[ Function State의 기본 구조 및 예제]

import {useState} from 'react'; // (1)

function FStateComp(){
    const [stateString, setStateString] = useState('react'); // (2)
    const [stateNumber, setStateNumber] = useState(501);
    
    return (
        <>
            <button onClick={() => setStateString('리액트')}>state String 변경</button> <br/>
            <button onClick={() => setStateNumber(502)}>state Number 변경</button> <br/>
            {/*(3)*/}
            StateString : {stateString} <br/>
            StateNumber : {stateNumber}
        </>
    )
}
export default FStateComp;

(1) useState를 사용하기 위해서는 import가 필요함

(2) const[변수, 변수 변경 함수] = useState('초기값);으로 constructor를 대체

(3) function 컴포넌트이기 때문에 this를 사용하지 않음