[React] State란?

State

State란?

UI를 바꾸기 위해서 별도의 상태를 관리하는 것

 

 

useState('초기값')

함수임.

초기값을 넣으면 배열형태로 리턴함

초기값을 가지고 있는 변수를 생성.

인덱스 0 에 초기값, 인덱스 1 에 초기값을 변경할 수 있는 setState를 리턴

import React, { useState } from 'react';

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

 

리액트 안에서 UI가 변경되는 값은 let, const가 아닌 useState를 사용한다.

 

 

 

이렇게 input 태그 안에서 들어오는 값을 바로 인식할 수 있게 만들기도 가능하다.

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;