[React] useState(1) : 카운트앱, input 값 받아오기

 

 

state 잘 쓰는 그날까지.. 🥲 

 

💡 카운트를 세보자

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const countFunction = () => {
    setCount(count + 1);
  };

  return (
    <div>
      {count}
      <button onClick={countFunction}>Click</button>
    </div>
  );
}

export default App;

 

setCount 의 초기값을 0 으로 설정하고,

버튼 클릭 시 count 에 + 1 한 값을 set 해준다.

❗️리액트는 state 가 바뀌어야 화면을 다시 렌더링 한다.
count 가 아니라 setCount 를 바꿔야 한다!!!
count 아무리 바꿔도 안되고 🎀 setCount 🎀를 바꿔야 한다!!!

 

 

💡 이름(텍스트) 바꾸기

import { useState } from "react";

function App() {
  const [name, setName] = useState("김김김");

  const changeName = () => {
    setName("박박박");
  };

  return (
    <div>
      {name}
      <button onClick={changeName}>Click</button>
    </div>
  );
}

export default App;

 

위와 같은 방식!

 

 

💡 input 에 바뀌는 값을 받아보자 : 아이디 비밀번호를 받아보자!

import { useState } from "react";

function App() {
  const [id, setId] = useState("");
  const [pw, setpw] = useState("");

  const enterId = (event) => {
    setId(event.target.value); {/*이벤트로 받은 값을 setId 에 바로 바로 넣는다.*/}
  };

  const enterPw = (event) => {
    setpw(event.target.value);
  };

  const hello = () => {
    alert(`${id}님 반가워요. 비밀번호는 ${pw}네요!`);

    setId(""); {/*input 초기화*/}
    setpw("");
  };

  return (
    <div>
      아이디 : <input value={id} onChange={enterId} /> {/*onChange 로 이벤트 발생 시 함수를 호출한다.*/}
      비밀번호 : <input type="password" value={pw} onChange={enterPw} />
      <button onClick={hello}>로그인</button>
    </div>
  );
}

export default App;