[React] useState 사용법 및 예제 - React Hook

React Hook - useState

 

 

 

 

💬 State란?

• 컴포넌트 내에서 변경이 일어나는 값을 관리하기 위해 사용
• 사용자 UI와 밀접하고 변경이 잦다면 변수(let, const) 말고 useState 사용

---

😎 useState 사용하기

 

App.js

 

1. 우선 useState를 사용하기 위해 import를 시켜줘야한다.

import { useState } from 'react';

 

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

const [변수명, set변수명] = useState(초기값);

첫번째는 변수명, 두번째는 변수를 변경시킬 함수다

코드만 보면 이해가 안되니 예시를 보도록 하자.

 

---

🔥 useState 예시1

 

첫 번째 예시는 버튼 클릭시 1씩 증가하는 대표적인 Counter 예시이다.

 

App.js

import { useState } from 'react';

function App() {
  const [counter, setCounter] = useState(0);
  console.log(`현재 State 값 : ${counter}`)

  const upgradeCounter = () => {
    setCounter(counter + 1)
  }
  return (
    <div>
        <span>Number : {counter}</span>
        <div>
          <button onClick={upgradeCounter}>UPGRADE</button>
        </div>
    </div>
  );
}

export default App;

 

실행화면 ✨

 

 

 

코드설명 💨

 

1. useState import

 

 

2. useState 초기값 만들기

 

counter이라는 state의 초기값 0

 

3. button에 onClick 속성을 주고 upgradeCounter 함수 호출

 

 

4. setCounter(state 변경 함수)로 counter + 1 증가

 

---

주의❗❗

만약 useState가 아닌 일반 변수를 증가시키면 어떻게 될까?

setCounter로 증가하지 않고 그냥 counter + 1 하면 재랜더링이 일어나지 않는다.

즉 UI가 변하지 않음

 

예시코드

function App() {
  let counter = 0; // useState를 사용하지 않고 변수 선언
  const handleCounter = () => {
    console.log(counter)
    return counter = counter + 1; // counter 1씩 증가
  }
  return (
    <div>
        <span>Number : {counter}</span>
        <div>
          <button onClick={handleCounter}>UPGRADE</button>
        </div>
    </div>
  );
}

export default App;

 

실행화면

잘못된 예시

 

counter라는 변수는 증가하고 있지만, UI는 변하지 않는다.

 

Why ❓

setState 함수는 state가 변경될 때 React에게 "화면을 다시 렌더링 해라"라는 명령을 내린다.

한마디로 UI와 밀접한 관계가 있는 변수는 State로 관리하는것이 좋다.

(잘못된 예시에는 재렌더링이 일어나지 않아 UI 상에 변경이 없다)

---

🔥 useState 예시2

 

두 번째 useState 예시는 사용자의 이름을 입력받아 li에 추가하는것이다.

 

App.js

 

import { useState } from 'react';

function App() {
  const [names, setNames] = useState([]);
  const [input, setInput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };
  const handleUpload = () => {
    console.log(`이전 names state : ${names}`)
    setNames((prev) => [...prev, input]);
  };

  return (
    <div>
        <input type="text" value={input} 
        onChange={handleInputChange}/>
        <button onClick={handleUpload}>Upload</button>

        <ul>
          {names.map((name, idx) => {
            return (
              <li key={idx}>{name}</li>
            );
          })}
        </ul>
    </div>
  );
}

export default App;

 

실행화면 ✨