React 용어

2 min read

Hook

React에서 Hook이라는 명칭은 기존의 흐름(flow)에 걸어서(hook into) 새로운 기능을 추가할 수 있다는 의미에서 나왔습니다.

좀 더 구체적으로 설명하면, 기존에는 class 컴포넌트에서만 state나 lifecycle methods를 사용할 수 있었는데, 함수형 컴포넌트에서도 이런 기능들을 사용할 수 있도록 “걸어둘(hook into)” 수 있게 만든 것이 Hook입니다. - 비유적으로 말해 “걸쇠”나 “갈고리”처럼 컴포넌트의 특정 동작이나 상태 관리에 갈고리처럼 걸어서 필요한 로직을 추가하는 방식이기 때문에 ‘hook’이라는 단어가 적절하다고 판단된 것입니다.

function MyComponent() {
  // 여기서 useState는 React의 상태 시스템에 "걸려 있는(hooked into)" 상태
  const [count, setCount] = useState(0);
}

요약

  • Hook이라는 명칭은 기존 시스템에 걸어서 기능을 확장한다는 개념에서 유래
  • 클래스 없이도 상태, 생명주기, context 등을 사용할 수 있게 해주는 함수들
  • 대표적으로 useState, useEffect, useContext, useReducer 등이 있음