[React] State

szlee·2023년 12월 5일

목록 보기

5/11

State

컴포넌트 내부에서 바뀔 수 있는 값.
바뀌어야 하는 이유? UI로의 반영을 위해!
즉, state는 UI를 바꾸기 위해 사용한다.

State 만들기

useState()를 사용한다.

import React, { useState } from 'react';

function GrandFather() {
  const [name, setName] = useState("김할아"); // 이것이 state!
  return <Mother grandFatherName={name} />;
}

useState는 state를 만들어주는 리액트에서 제공하는 기능(훅).

useState 사용하기

const [value, setValue] = useState(초기값);

state는 언제든지 변할 수 있는 값이기 때문에 초기값이라는 개념이 존재하는 것이다.

State 변경하기

setValue()로 값을 바꿀 수 있다.
하지만 이렇게 바뀐 값은 브라우저를 새로고침하면 다시 초기값으로 바뀐다.
setValue를 통해 바꾼 값은 어디에 저장되는 것이 아니기 때문에 단순히 화면에서만 바뀐 값으로, 다시 렌더링이 되는 것이다.

useState + onClick Event

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;

useState + onChange Event

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");
  
  const onChangeHandler = (event) => {
    const inputValue = event.target.value;
    setValue(inputValue); //사용자가 입력한 값으로 값 변경한다.
  }

  return (
    <div>
      <input type="text" onChange={onChangeHandler} value={value}/> //변화가 감지되면
    </div>
  );
};

export default App;

이벤트 핸들러 안에서 자바스크립트의 event객체를 꺼내 사용할 수 있다.
사용자가 입력한 input의 값은 event.target.value로 꺼내 사용할 수 있다.
마지막으로 state인 value를 input의 요소인 value에 넣어주면 input과 state를 성공적으로 연결한 것이다.
-> 사용자의 input값을 state로 관리할 수 있다. <HTML DOM event 개념>