React Hook

Hook

Hook을 직역하면 "갈고리"라는 뜻이다. react에서 hook은 hook into에서 따왔다고 한다. hook into는 "~에 연결하다" 혹은 "연동"의 의미를 가지고 있다. 이 Hook을 사용하면 Functional compenentd에 변수를 연결하여 lifecycle을 관리할 수 있다.

Funtional component?
-> 함수로 작성된 component

Hook은 Web application을 설계하는데 매우 직접적인 개념이다. 사실 Web에서 javascript 기능 없이 index.html만 간단하게 디자인 적으로 제공한다면 Hook은 필요 없을지도 모릅니다.

React Hook의 규칙

1. 리액트 Hook은 반복문, 조건문 혹은 중첩된 함순 내에서 호출되며 받느시 최상위에서만 Hook을 호출 해야한다. 또한 Hook은 렌더링 시 항상 동일한 순서로 호출 되어야한다.

2. Hook은 React함수 내에서 호출 해야한다. 즉 리액트 Hook은 함수형 컴포넌트에서 호출해야하고 추가적으로 custom hooks에서 호출이 가능하다.

마지막으로, 커스텀 Hook은 여러 Hook을 조합하여 반복되는 로직을 하나의 함수로 분리한 것이다.
커스텀 Hook을 사용하면 코드 중복을 줄이고, 기능 단위로 로직을 재사용할 수 있어 유지보수성이 향상된다.

다음은 UseState와 use Effect에 대해 알아보겠다