⚛️Start! React : section07 - state,useState

React Hook API중 상태를 관리하는 useState를 알아보려고 한다. 상태값을 전달해서 해당 상태의 값의 변동으로 React가 웹 브라우저를 랜더링 시킬 수 있다. useState를 활용해서 다양한 형태의 코드를 살펴 보려한다. 우선 내가 작성한 useState는 아래와 같다.

import { useState } from "react";

function Class_App() {

  const [name, setName] = useState("Mike");

 

  function changeName() {

    if (name === "Mike") {

      setName("Jane")

    } else if (name === "Jane") {

      setName("Mike")

    }

  }

  return (

    <div>

      <h1>state</h1>

      <h2>{name}</h2>

      <button onClick={changeName}>Change</button>

    </div>

  );

}

export default Class_App;

if문을 사용해서 만들었지만 이를 좀더 간략하게 할 수 있다. 아래 코드를 살펴보자.

import { useState } from "react";

function Class_App() {

  const [name, setName] = useState("Mike");

  function changeName() {

    const newName = name === "Mike" ? "Jane" : "Mike"; 

    setName(newName);

  }

  return (

    <div>

      <h1>state</h1>

      <h2>{name}</h2>

      <button onClick={changeName}>Change</button>

    </div>

  );

}

export default Class_App;

newName으로 삼항연산자(조건연산자)의 값을 받고 받은 값을 setName으로 상태를 변경한다. 그렇게 변경된 내용으로 React는 브라우저를 다시 랜더링 하게 되는 것이다. 이를 변수에 답지 않고 setName에 바로 적용하면 아래와 같다.

import { useState } from "react";

function Class_App() {

  const [name, setName] = useState("Mike");

  function changeName() {

    setName(name === "Mike" ? "Jane" : "Mike");

  }

  return (

    <div>

      <h1>state</h1>

      <h2>{name}</h2>

      <button onClick={changeName}>Change</button>

    </div>

  );

}

export default Class_App;

이외에도 함수에 직접 화살표기법으로 줄수도 있다. 아래코드와 같다.

import { useState } from "react";

function Class_App() {

  const [name, setName] = useState("Mike");

  return (

    <div>

      <h1>state</h1>

      <h2>{name}</h2>

      <button onClick={() => {

        setName(name === "Mike" ? "Jane" : "Mike");

      }}>Change</button>

    </div>

  );

}

export default Class_App;

useState의 기본적인 형태는 굉장히 단순하지만 이를 복잡하게 구조화하고 응용한다면 충분히 어려울 수 있다.