[리액트기초] Hook

◼ Hook이란 

Hook은 React 16.8 버전부터 도입된 새로운 기능으로, 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해줍니다. 이전에는 클래스형 컴포넌트에서만 상태와 생명주기를 관리할 수 있었지만, Hook을 사용하면 함수형 컴포넌트에서도 동일한 기능을 사용할 수 있게 되었습니다.

 

Hook을 사용하여 상태를 관리하며 로직의 복잡성을 줄이고 재사용을 높이며 가독성 또한 쉽도록 만들어 줍니다.

 

 

 

---

 

 

 

Hook의 종류

더 많은 종류가 있지만 여기서는 몇가지만 설명하겠습니다.

1. useState: 함수형 컴포넌트에서 상태를 추가하고 관리하는 데 사용됩니다.
2. useEffect: 컴포넌트의 렌더링 사이클과 관련하여 side effect를 수행하는 데 사용됩니다. 예를 들어 데이터를 가져오거나 구독을 설정하는 등의 작업을 수행할 수 있습니다.
3. useContext: 컴포넌트 트리 내에서 전역 상태를 공유하기 위해 사용됩니다. Context API와 함께 사용되며, 특정 컨텍스트에 대한 값을 읽고 업데이트할 수 있습니다.
4. useReducer: 복잡한 상태 로직을 관리하고자 할 때 사용됩니다. useState보다 더 강력한 상태 관리 도구이며, Redux와 유사한 동작을 제공합니다.
5. useCallback: 함수를 메모이제이션하여 성능을 최적화하는 데 사용됩니다. 주로 렌더링 성능을 향상시키기 위해 사용됩니다.
6. useMemo: 값이 변경되지 않는 한 값을 캐시하여 성능을 최적화하는 데 사용됩니다. 주로 계산 비용이 많은 연산을 수행할 때 사용됩니다.
7. useRef: DOM 요소 또는 React 컴포넌트 인스턴스에 대한 참조를 만들 때 사용됩니다. Ref는 reference(참조)의 줄임말이다. useRef를 이용하면 특정한 DOM요소에 접근이 가능하면, 불필요한 재렌더링을 하지 않는다는 장점이 있다.
8. useLayoutEffect: useEffect와 비슷하지만, 렌더링 결과가 화면에 동기적으로 반영될 때 작동합니다. 주로 렌더링 직후에 DOM 요소를 측정하거나 조작할 때 사용됩니다.

 

 

---

 

 

 

 

Hook의 주의사항

1. 최상위 레벨에서만 호출 가능: Hook은 컴포넌트의 최상위 레벨에서만 호출할 수 있습니다. 다시 말해, 조건문, 반복문, 중첩된 함수 등과 같은 중첩된 범위에서는 Hook을 호출할 수 없습니다. 이렇게 함으로써 React는 컴포넌트의 렌더링 사이클 동안 Hook의 호출 순서를 보장할 수 있습니다.
2. 함수 컴포넌트 또는 커스텀 훅에서만 호출 가능: Hook은 함수 컴포넌트 내에서 또는 커스텀 훅에서만 호출할 수 있습니다. 클래스 컴포넌트 내에서는 Hook을 사용할 수 없습니다. 이는 Hook을 사용하는 함수 컴포넌트나 커스텀 훅이 컴포넌트의 상태와 생명주기에 영향을 주기 때문입니다.