React: useState를 통해 변화하는 값을 관리하자

useState

useState는 컴포넌트 내부에서 동적으로 변경이 되는 데이터를 관리할 때 사용할 수 있는 함수이다. useState를 사용하면 함수형 컴포넌트 내에서 상태 변수를 선언하고 업데이트를 할 수 있다. useState 사용 시에 주의해야 할 사항이 있는데, 컴포넌트의 최상위 레벨에서만 호출이 가능하며 반복문이나 조건문 안에서는 호출이 불가능하다. 

• import {useState} from 'react';
  useState를 활용하기 전에 react 모듈에서 useState를 불러온다. 
  
  
• const[state, setState] = useState(initialState);
  - state : 현재 상태 변수를 나타낸다.
  - setState : state를 다른 값으로 업데이트하고 재렌더링을 해주는 함수이다. 
  - initialState : state의 초기 설정값으로, 이 인수는 초기 렌더링 이후에 무시된다.

import { useState } from 'react'
import './App.css'

function App() {
  const [text, setText] = useState("");
  
  return (
    <>
      <input type="text" value={text} onChange={(e)=>{setText(e.target.value)}}/>
      <p>작성한 글 : {text}</p>
      <button onClick={()=>setText("")}> 리셋 </button>
    </>
  )
}

export default App