[React] - 2차 - useState 사용 예

 

import './App.css';

import { useState } from 'react';

function App() {

  const [text, setText] = useState("몰라일단");

 

  const updateText = () => {

    setText("업데이트!!");  {/*  연결할 명칭사용 예  */}

    console.log(text); 

  }

  return (

    <div className="App">

      <span>{text}</span> {/*  사용할 명칭사용 예  */}

      <button onClick={updateText}>업데이트</button>

    </div>

  );

}

export default App;

여기서 좀 신기한게 useState 

선언하고 값을 조절하는건 익숙하지만 useState로 값을 조절하는게 신기했다

몇가지 테스트를 해보니

const [ 사용할 명칭, 연결할 명칭 ] = useState("텍스트 값");

이런느낌이었다 사용할때는 '사용할 명칭'은 변수명으로 선언되고 연결할 명칭은 함수처럼 선언되어 사용한다

 

import './App.css';

import { useState } from 'react';

function App() {

  const [input1, setInput1] = useState("");

  const [input2, setInput2] = useState("");

  const onSubmit = () => {

    alert("onSubmit함수 실행"+" || "+input1+" || "+input2);

  }

  return (

    <div className="App">

      <form onSubmit={onSubmit}>

        <input placeholder='이름!' value={input1} onChange={(e) => setInput1(e.target.value)}></input><br />

        <input placeholder='비번!' value={input2} onChange={(e) => setInput2(e.target.value)}></input><br />

        <button type='submit'>전송1</button>

        <br /> <br />

      </form>

    </div>

  );

}

export default App;