React 정리하기(1) - useState 사용하기

0. state, setState, useState 란?

state는 간단히 변수, setState는 state변수의 값을 변경하는 함수, useState는 react-hook의 한 종류로 data와 function을 반환하는 상태관리 함수다.

<특징>
state값의 변경시, 자동으로 리렌더링

1. usestate의 원형

react
const data = useState(); //초기값 0으로 -> 괄호안에 0

요약
1) data와 function을 가진 객체를 반환
2) 리스트로 객체를 반환한다는 사실이 중요!
3) 변수 접근에 대해 data[0] 처럼 인덱스로 접근해야함을 의미함

2. usestate 보편적인 모형

const [변수명, set변수명] = useState(초기값);

function App() {
  const [counter, setCounter] = useState(0);
  const onClick = ()=>{
    setCounter(counter+1); // couter 값 지정 -> refresh(rerendering)
  }
  return (
  <div>
          <button onClick = {onClick}></button>
  </div>
  )
 }

3. State Function

• 2가지 방법 존재

  // 1. 이전의 값을 가지고 계산(에러 발생 가능)
  setCounter(counter + 1); 
  // 2. 현재 값을 가지고 계산 (안전) , current 변수에 저장된 값 자동으로 맵핑
  setCounter((current)=> current +1); 

• 두 방법의 차이 예시

  

input 사용시?

cont onChange = (event)=>{
setState(event.target.value); // event라는 객체의 target필드의 value값이 input값이다.
}
return (
<input
value = {value}
onChange = {onChange} // 없으면 input 값 고정됨
></input>
)