클래스 컴포넌트에서만 사용할 수 있었던 상태, 라이프사이클 관리를 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 기능
- 함수 컴포넌트에서만 사용 가능
- 이름은 반드시 use로 시작해야한다
- 내장 hook이 존재 (직접 만드는 것도 가능)
- 함수 컴포넌트 혹은 커스텀 훅안에서만 호출할 수 있다.
- 항상 함수컴포넌트 내 최상위에서만 호출해야한다.
(첫번째 중괄호 내부 -> return이나 중첩문 내에서는 사용을 못한다.)
const navigate = useNavigate();
const goToMain = () => {
navigate("/main");
};
<button
className="inputinfo loginBtn"
id="login-btn"
onClick={goToMain}
>
로그인
</button>