[React] useState과 custom Hook - 이론 설명, 활용 예제

이번 글은 useState와 custom Hook에 대한 설명글이다.

---

 

[ useState ]

=> num을 변경하려면 setNum을 통해 num을 변경해줄 수 있음

=> useState(0)처럼 기본값을 설정할 수 있음

=> num이 바뀌면 화면이 렌더링됨

const [num, setNum] = useState(0);

🔽useState 예제🔽

// App.jsx
import { useState } from "react";

function App() {
  const [isOn, setIsOn] = useState(false);

  const toggle = () => {
    setIsOn(prev => !prev);
  };

  return (
    <div>
      <button onClick={toggle}>
        {isOn ? "ON" : "OFF"}
      </button>
    </div>
  );
}

export default App;

 

---

 

 

[ useState의 콜백함수 사용 ]

사용 이유 : 리액트가 state의 값을 즉시 바꾸지 않고 한번 렌더링이 된 이후에 값이 변경되기 때문에 렌더링 이전의 state 값을 가지고 처리해야할 게 있으면 아래 코드처럼 콜백함수를 이용해야함

=> 콜백함수의 매개변수로 이전 state의 값을 받음

setCount(prev => prev + 1);

 

🔽useState 콜백함수 예제🔽

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // 이전 상태(prev)를 기준으로 새 값을 계산
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
  };

  return (
    <div>
      <p>count: {count}</p>
      <button onClick={handleClick}>+2 증가</button>
    </div>
  );
}

export default Counter;

 

 

---

 

 

[ custom Hook ]

위의 useState 예제에서 useState 부분을 여러 군데에서 사용하는 법

=> 커스텀 훅을 만들어 해당 state 부분을 따로 외부로 빼서 관리

* state값과 setter 함수를 리턴하는 커스텀 훅

🔽Custom Hook 예제🔽

// useToggle.jsx

import { useState } from "react";

export default function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = () => setValue(prev => !prev);

  return [value, toggle];
}

 

// App.jsx

import useToggle from "./useToggle";

function App() {
  const [isOn, toggle] = useToggle(false);

  return (
    <div>
      <button onClick={toggle}>
        {isOn ? "ON" : "OFF"}
      </button>
    </div>
  );
}

export default App;

 

---