React State

State란 무엇인가?

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
=> 목적은 단 하나, 바로 UI로의 반영을 위해서

State 만들기

State를 만들 때는 useState()를 사용한다.
우리는 앞으로 useState라는 함수를 이용해서 state를 만들고, 관리하게 된다. useState는 리액트에서 제공하는 기능이다. 그래서 리액트에만 존재하는 개념이자 기능이기 때문에 앞으로 "기능"이라 부르지 않고, "훅"이라고 표현하자.

useState를 사용하는 방식

const [state, setState] = useState(초기값)

State 변경하기

state를 변경할 때는 setState(바꾸고 싶은 값)를 사용한다. 특정 조건에 실행되는 함수 내부에 setState(변경하고 싶은 값)함수를 호출하면 'state'변수를 활용한 모든 태그에서 초기값으로 설정한 값으로부터 '변경하고 싶은 값'으로 변하면서 다시 랜더링되게 된다.

버튼 태그와 이벤트 핸들러 구현하기(useState + onClick Event)

ex)

<script>
import React, { useState } from "react";

function App() {
  const [name, setName] = useState("길동이");

  function onClickHandler() {
    setName("누렁이");
  }

  return (
    <div>
      {name}
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;
</script>

위의 예시에서 name이라는 변수는 <div>태그 안에서 활용되었다. 초기값을 "길동이"로 설정했기 때문에 화면이 랜더링될 때, 태그는 "길동이"라는 문자열 데이터를 출력한다. 그러다가 버튼 태그에 있는 onClick이벤트로 인해 onClickHandler라는 함수가 실행된다. 해당 함수는 setName을 초기값에서 "누렁이"라는 문자 데이터로 변경하는 기능을 하기 때문에 화면이 재랜더링되면서 name함수가 활용된 모든 부분의 데이터가 바뀌게 된다.

useState + onChange Event

ex)

<script>
import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  const onChangeHandler = (event) => {
    const inputValue = event.target.value;
    setValue(inputValue);
  };

	console.log(value) // value가 어떻게 변하는지 한번 콘솔로 볼까요?

  return (
    <div>
      <input type="text" onChange={onChangeHandler} value={value} />
    </div>
  );
};

export default App;
</script>

우리 state로 관리하고자 하는 변수는 "value"이다. "value"는 onChangeHandler라는 함수가 실행될 때 console.log로 찍혀나오도록 활용되고 있다. onChangeHandler는 event객체를 매개변수로 받아 실행되는데 input태그 상에서 onChange속성에 의해 실행되게 된다. 즉, input태그의 value가 변하게 될 때마다 onChangeHandler라는 함수가 실행되고, 그럴때마다 input태그의 value가 inputValue라는 변수에 저장되면서 value의 state를 변화시키게 되고, console.log로 변경된 value값이 콘솔창에 찍히게 된다.