[React] 2주차 스터디 - useState 변수 상태 관리하기

useState란?

함수형의 리액트인 Hook에 속함 함수로 React 16.8 부터 사용 가능하다.
주로 자신 컴포넌트가 유동적으로 변경될 값을 관리할 때 사용한다.

useState를 사용하기 위해선 import를 필수로 해주어야한다.

import { useState } from "react";

 

기본적인 문법은 다음과 같다.

function 컴포넌트(props) {
  const [값변수, 값변경함수] = useState(기본값);

  const 값변경함수 = () => {
  //변경될 코드
  }
  return(
  	<></>
  );
}

---

[useState를 사용하지 않은 예제]

import './App.css';

function App() {
  let title = "이름";

  function change() {
    const newTitle = title === "이름" ? "리액트 스터디 화이팅!" : "이름";
    document.getElementById("title").innerText = title;
  }

  return (
    <div className="App">
      <h1 id="title">{title}</h1>
      <button onClick={change}>타이틀 바꾸기</button>
    </div>
  );
}

export default App;

 

[useState를 사용한 예제 - 1]

import './App.css';
import {useState} from "react";

function App() {
  const [title, setTitle] = useState("이름");  // 달라진 곳

  function change() {
    const newTitle = title === "이름" ? "리액트 스터디 화이팅!" : "이름";
    setTitle(newTitle);  // 달라진 곳
  }

  return (
    <div className="App">
      <h1 id="title">{title}</h1>
      <button onClick={change}>타이틀 바꾸기</button>
    </div>
  );
}

export default App;

 

[useState를 사용한 예제 - 2]

import './App.css';
import {useState} from "react";

function App() {
  const [title, setTitle] = useState("이름");

  function change() {
    setTitle(title === "이름" ? "리액트 스터디 화이팅!" : "이름");  // 달라진 곳
  }

  return (
    <div className="App">
      <h1 id="title">{title}</h1>
      <button onClick={change}>타이틀 바꾸기</button>
    </div>
  );
}

export default App;

 

[useState를 사용한 예제 - 3]

import './App.css';
import {useState} from "react";

function App() {
  const [title, setTitle] = useState("이름");

  return (
    <div className="App">
      <h1 id="title">{title}</h1>
      <button onClick={()=>{
      	title === "이름" ? "리액트 스터디 화이팅!" : "이름"}  // 달라진 곳
      }>타이틀 바꾸기</button>
    </div>
  );
}

export default App;

---

브라우저 결과

타이틀 바꾸기 버튼 클릭 전

타이틀 바꾸기 버튼 클릭 후

버튼을 계속 클릭하면 두 값이 계속 바뀐다.