[React] state

state란?

컴포넌트 내부에서 바뀔수 있는 값

useState()

state를 만들때에는 useState()를 사용

usestate는 state를 만들어주는 리액트에서 제공하는 기능으로,
리액트에만 존재하는 개념!

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

const로 선언하고
[state의 이름, set을 붙이고 state의 이름] = usestate(원하는 처음값);

const [name, setName] = useState("홍길동");

name이라는 state를 만들었고, name state의 처음 값을 "홍길동"으로 정했다.

처음 값을 initial state라고 하는데 state는 언제든지 변할 수 있는 값이기 때문에 '처음값'이 존재

state 변경하기

state를 변경할때에는 setValue(바꾸고 싶은 값) 을 사용

위에 코드와 동일한 예제가 있다고 했을때,
setName('홍길녀')를 쓰면 이름이 바뀔 것이다.

이 예제는 버튼을 눌렀을때 setName('홍길녀') 를 실행하도록 한 예제이다.

// src/App.js

import React, { useState } from "react";

function Child(props) {
  return (
    <div>
      <button
        onClick={() => {
          props.setName("홍길녀");
        }}
      >
        할아버지 이름 바꾸기
      </button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

function Mother(props) {
  return (
    <Child grandFatherName={props.grandFatherName} setName={props.setName} />
  );
}

function GrandFather() {
  const [name, setName] = useState("홍길녀");
  return <Mother grandFatherName={name} setName={setName} />;
}

function App() {
  return <GrandFather />;
}

export default App;

이렇게

function Child(props) {
  return (
    <div>
      <button>할아버지 이름 바꾸기</button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

<button> 앞에 onclick() => 을 넣으면 버튼을 클릭하면 화살표 뒤에 내용으로 값이 바뀜이라는 뜻

하지만 setName을 통해 바꾼값은 어디에 저장되는것이 아니라 그냥 화면에서만 바뀐값으로 렌더링 된다는거 알아두기!

useState + Onchange event

보통 input에서 사용자가 입력한 값을 state로 관리하는 패턴을 많이 사용

import React, { useState } from "react";

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

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

	console.log(value) 

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

export default App;

input에 onChange라는 이벤트를 불러내고 생성한 이벤트 핸들러를 넣는다.

이벤트핸들러 안에서 js의 event 객체를 꺼내 사용할 수 있다.
사용자가 입력한 input 값은 event.target.value로 꺼내 사용 가능하다