[react] useState()

1. props와 state 차이

 

props는 매개변수처럼 컴포넌트에 전달되고 read-only이므로 변경할 수 없는 반면,

state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리되고 컴포넌트 내부에서 변경이 가능하다.

state는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용된다.

 

 

2. useState()

 

기본 형태

const [값, 값에 적용할 함수] = useState(초기값);

Function App() {
  const [number, setNumber] = useState();

  return (
    <div className="App">
      <header>
        <span>{number}</span>
      </header>
    </div>
  );
}

 

 

3. state 변경하기

 

Function App() {
  const [number, setNumber] = useState();

  return (
    <div className="App">
      <header>
        <span>{number}</span>
        <h1><a href='#' onClick= {() => setNumber(number + 1)}>누르세요!</a></h1>
      </header>
    </div>
  );
}

a태그를 클릭할 때마다 number의 값이 1씩 증가한다.

 

function APP() {
  const [counter, setCounter] = useState(0);
  const onClick = () => {
    // setCounter(counter + 1);
    setCounter((current) => current + 1);
    // 현재 state를 불러와서 + 1 해줌
  }
  return (
    <div>
      <h3>total clicks : {counter}</h3>
      <button Onclick={onClick}>click me</button>
    </div>
  );
}

 

이전 상태는 prevState를 사용하면 알아서 이전 값을 인식한다.