State를 사용하기 위해서는 클래스 내부에 아래와 같이 선언 해 준다
constructor(props) { super(props); this.state = { number: 0, }; }
실제 사용되는 모습
import React, { Component } from "react"; export default class TestStateClassComponent extends Component { constructor(props) { super(props); this.state = { number: 0, }; } render() { const { number } = this.state; return ( <div> <h4>{number}</h4> <button onClick={() => { this.setState({ number: number + 1 }); }} > +1 </button> </div> ); } }
함수형 컴포넌트에서 state를 사용하기 위해 아래와 같이 작업 해 준다
import React, { useState } from "react"; const [message, setMessage] = useState();
실제 사용되는 모습
import React, { useState } from "react"; export default function TestFuncComponent() { const [message, setMessage] = useState(); const onClickEnter = () => setMessage("안녕하세요!"); const onClickLeave = () => setMessage("안녕히가세요!"); return ( <div> <h3>{message}</h3> <button onClick={onClickEnter}>입장</button> <button onClick={onClickLeave}>퇴장</button> </div> ); }
state에 기본 값을 넣어 줄 수 도 있다
const [message = "React입니다", setMessage] = useState();