5. React - State, useState(상태값)

ㅁ State는 component가 가지고 있는 속성값

ㅇ 속성값이 변하면 React는 자동으로 속성값을 업데이트 시켜줌

ㅁ useState 는 실시간 상태값 변경 할때 사용

---

1. useState

import { useState } from 'react';

export default function Hello(){

    const [name, setName] = useState('Adidas');     // 상태값 반환하는 setName 변수

    function changeName(){        

        setName(name === 'Adidas' ? 'Asics' : 'Fila');

    }

    return(

        <div>

            <h1>state</h1>

            <h1>{name}</h1>

            <button onClick={changeName}>Change</button>

        </div>

    );

}

---

2. useState

import { useState } from 'react';

export default function Hello(){    

    const [name, setName] = useState('Adidas');     // 상태값 반환하는 setName 변수  

    return(

        <div>

            <h1>state</h1>

            <h1>{name}</h1>

            <button onClick={()=>{

                setName(name === 'Adidas' ? 'Asics' : 'Fila');

            }}>Change</button>

        </div>

    );

}

---