[React] hook

SuJeong·2022년 11월 1일
0

React

목록 보기
5/9

1. hook(훅)이란?

클래스 컴포넌트에서만 사용할 수 있었던 상태, 라이프사이클 관리를 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 기능


2. hook의 특징

  • 함수 컴포넌트에서만 사용 가능
  • 이름은 반드시 use로 시작해야한다
  • 내장 hook이 존재 (직접 만드는 것도 가능)

3. hook의 사용규칙

  • 함수 컴포넌트 혹은 커스텀 훅안에서만 호출할 수 있다.
  • 항상 함수컴포넌트 내 최상위에서만 호출해야한다.
    (첫번째 중괄호 내부 -> return이나 중첩문 내에서는 사용을 못한다.)

ex) 내장 hook - useNavigate

const navigate = useNavigate();
  const goToMain = () => {
    navigate("/main");
  };
<button
  className="inputinfo loginBtn"
  id="login-btn"
  onClick={goToMain}
>
로그인
</button>
profile
Front-End Developer

0개의 댓글