[React] State

[State]

 

State 란 컴포넌트 내에서 바뀔 수 있는 값을 의미하며, State 를 만들 때에는 useState()를 사용한다.

 

[useState hook]

 

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

 

[useState + onClick]

 

버튼을 누르면, onClickHandler 가 실행되고 초기값("길동이") -> setName("누렁이")로 이름이 변경된다.

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]

 

input 값이 비어있는 초기값에서, e.target.value 를 통해 값을 입력하면 입력값으로 fruit 가 변경된다.

import React, { useState } from "react";

function App() {
  // State 를 쓰는 목적
  // UI 를 바꾸기 위해서
  const [fruit, setFruit] = useState("");
  return (
    <div>
      과일 :{" "}
      <input
        value={fruit}
        onChange={function (e) {
          setFruit(e.target.value);
        }}
      />
      <br />
      <br />
      {fruit}
    </div>
  );
}

export default App;