useState란?

1
const [state, setState] = useState(initialState);

리액트에서 상태 변수를 컴포넌트에 추가할 때 사용하는 리액트 훅이다.

특징으로는 상태를 변경하기 위해서는 set 함수를 사용하여 변경해야만 하고, set 함수에 새로운 값을 인자로 전달하면 새로운 상태로 렌더링을 일으킨다.

useState로 컴포넌트 Reset 시키기

주로 어떤 상태를 reset 시키기 위해 아래와 같은 코드를 작성할 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function App() {
  const [list, setList] = useState([]);

  const resetList = () => {
    setList([]);
  };
  const addList = () => {
    setList([...list, 10]);
  };

  return (
    <>
      <button onClick={resetList}>Reset Button</button>
      <button onClick={addList}>Add 10</button>
      <div>
        {list.map((num) => (
          <p>{num}</p>
        ))}
      </div>
    </>
  );
}

위와 같이 직접 상태를 초기화 하는 방법도 있지만 key props에게 변경된 상태를 전달함으로써 해당 컴포넌트는 물론 해당 컴포넌트의 하위 컴포넌트까지 reset할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { useState } from "react";

export default function App() {
  const [version, setVersion] = useState(0);

  function handleReset() {
    setVersion(version + 1);
  }

  return (
    <>
      <button onClick={handleReset}>Reset</button>
      <Form key={version} />
    </>
  );
}

function Form() {
  const [name, setName] = useState("Taylor");

  return (
    <>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>Hello, {name}.</p>
    </>
  );
}