1. useState란?

useState를 알아보기 전에 먼저 state에 대해 알아야 할 필요가 있다.
state는 간단하게 생각하면 변수이다.
state는 일반 변수와 다르게 값이 변하게 되면 렌더링이 일어난다.

// state는 아래와 같이 선언해준다.

const [state, setState] = useState(초기값)

state는 변수이다.
setState는 state를 변경시켜주는 함수이다.
useState는 state, setState를 return 하면서 초기값을 설정해주는 hook이다.

정리하자면, useState는 reack Hooks 중 하나로, 컴포넌트의 state를 간편하게 생성하고 업데이트를 시킬 수 있게 해 주는 도구를 제공해 준다.

1-1. 왜 useState 를 사용할까?

유동적이지 않은 데이터를 저장할 때는 var, let, const 변수에 저장해도 되지만, 자주 바뀌는 중요한 데이터일 경우 useState를 사용해 state에 저장하는 것이 좋다.

① 간단하고 직관적인 사용법을 제공해 상태 관리를 쉽게 할 수 있다.

② 객체나 배열과 같은 복잡한 상태를 관리할 수 있다.

③ 자동 재렌더링이 되어, state 데이터들이 변경되면 HTML에도 자동적으로 변경사항이 반영된다.

④ 새로고침 없이도 HTML을 변경시켜 보여 주는 웹/앱 사이트를 만들 수 있다.

2. useState() 사용하기

useState()를 이용해 LCK 결승 티켓 구하기

// App.js

import "./styles.css";
import React from "react";

export default function App() {
  const [result, setResult] = React.useState("No");
  console.log(result);
  function buy() {
    setResult("Yes");
  }

  return (
    <div className="App">
      <h1>LCK 결승 티켓을 구할 수 있을까요?</h1>
      <h2>{result}</h2>
      <button onClick={buy}>암표 구매</button>
    </div>
  );
}

// App.js

import React from 'react';
import Info from './Info';

const App = () => {
  return <Info />;
};

export default App;

코드를 실행하면 No

암표 구매를 누르면 Yes로 바뀌는 것을 볼 수 있다.

---

ustState()를 이용해 Counter 기능 구현하기

// App.js
// 버튼 3개 만들고 + - reset 카운터기 만들기


import "./styles.css";
import { useState } from "react";

export default function App() {
  const [number, setNumber] = useState(0);

  function plus() {
    setNumber(number + 1);
  }

  function minus() {
    setNumber(number - 1);
  }

  function reset() {
    setNumber(0);
  }

  return (
    <div className="App">
      <h1>{number}</h1>
      <button onClick={plus}>+</button>
      <button onClick={minus}>-</button>
      <button onClick={reset}>reset</button>
    </div>
  );
}

카운터가 잘 작동하는 모습을 볼 수 있다.

3. useState를 여러번 사용하기

// info.js

import React, { useState } from 'react';

const Info = () => {
  const [name, setName] = useState('');
  const [nickname, setNickname] = useState('');

  const onChangeName = e => {
    setName(e.target.value);
  };

  const onChangeNickname = e => {
    setNickname(e.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} />
        <input value={nickname} onChange={onChangeNickname} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임: </b>
          {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

App 컴포넌트에서 Info 컴포넌트를 렌더링한다.

// App.js

import React from 'react';
import Info from './Info';

const App = () => {
  return <Info />;
};

export default App;

위에 이름, 닉네임을 입력하면 밑에 출력되는 모습을 확인할 수 있다.