React Hooks

Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.

→ Hook은 함수형 컴포넌트에서 사용하던 기능을 사용할 수 있게 해주는 함수

사용 배경

• 클래스형 컴포넌트는 문법이 어렵고, 코드의 재사용성이 낮으며 축소가 어려움
• 이러한 클래스형 컴포넌트의 단점을 보완하기 위해 함수형 컴포넌트 등장
• 함수형 컴포넌트에서는 클래스형 컴포넌트의 장점인 State나 Life Cycle Method을 다루는 기능 사용 불가능

→ 이를 해결하기 위해 Hook 등장

사용 규칙

Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다.

• 최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
• React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다.

기본 hook

useState

컴포넌트의 state(상태) 관리

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

useEffect

컴포넌트의 상태 주기에 따라 실행할 코드 관리

useEffect(setup, dependencies?)

useContext

컴포넌트 전역 상태 관리

const value = useContext(MyContext);

references
👉 https://defineall.tistory.com/900#toc1