React Hooks에 대해

<React Hooks 이란?>

React Hooks는 react 버전 16.8에 도입 되었습니다. 

Hooks는 함수 컴포넌트에게 상태 (state) 기능에 접근할 수 있도록 해 주면서, 클래스 컴포넌트의 의존도가 많이 없어젔습니다. Hooks를 사용하면서 React 애플리케이션에서 상태 관리와 부수 효과를 보다 깔끔하고 간결하게 처리할 수 있습니다. 

 

<Hook 규칙들>

• 함수 컴포넌트에서만 Hooks 사용이 가능합니다
• Hooks 사용하려면 React에서 가져와야 (import) 합니다.
• Hook은 항상 컴포넌트의 최상위에서 호출해야 합니다.
• Hook은 조건문 안에서 호출해서는 안 됩니다.

<Hook 종류들>

• 상태 훅 (State Hooks)
• 컨텍스트 훅 (Context Hooks)
• 레퍼언스 훅 (Ref Hooks)
• 이펙트 훅 (Effect Hooks)
• 성능 훅 (Performance Hooks)
• 리소스 훅 (Resource Hooks)
• 기타 훅 (Other Hooks)

<대표적인 리액트 훅들>

• useState 훅 : 함수 컴포넌트에서 상태를 추적할 수 있게 해줍니다. 여기서 상태 (State)란 일반적으로 애플리케이션에서 추적해야 하는 데이터나 속성을 의미합니다. 또한 useState로 생성한 상태값을 함수로 변경하면 상태 값이 변경되고, 해당 상태를 가지고 있는 컴포넌트가 다시 렌더링 됩니다. **useState 상태 업데이트는 비동기적으로 처리되므로 즉시 반영되지 않을 수 있습니다.**

버튼을 누르면  "My Favourite color is "{color}!" 이 해당 색상으로 변경됩니다. "Red" 선택할 경우 "My Favourite color is red"으로 변경됩니다. 

 

• useContext 훅 : 컨텍스트 훅(Context Hooks)을 사용하면 정보를 prop으로 전달하지 않고도 접근할 수 있습니다.
  React Context는 전역 상태를 관리하는 방법으로, useState 훅과 함께 사용하면 상태를 깊이 중첩된 컴포넌트 간에도 쉽게 공유할 수 있습니다. useContext는 데이터를 공유할 때 사용합니다. 

계속 State를 사용하는 대신 자식 컴포넌트를 Context Provider로 감싸고, 상태 값을 제공하여 트리안에 있는 모든 컴포넌특가 user Context 접근 할 수 있게 됩니다. 자식 컴포넌트에 Context 사용할려면 useContext 훅을 사용하면 됩니다.  

 

• useRef 훅 : useRef 훅은 렌더링 사이에서도 값을 유지할 수 있게 해줍니다. 이 훅은 값이 변경되어도 리렌더링을 일으키지 않는 변경 가능한 값을 저장할 때 사용할 수 있습니다. 또한, DOM 요소에 직접 접근할 때도 유용합니다.

useRef을 사용하여 렌더링 수를 추적 할 수 있습니다. useRef()는 하나의 항목만 반환하며, current라는 속성을 가진 개체 (Object)를 반환합니다. 참고로 useRef는 이전 상태 값을 추적하는 데에도 사용할 수 있습니다. 이는 useRef의 값이 렌더링 사이에서도 유지되기 때문입니다. 

 

• useEffect 훅 : useEffect 훅은 컴포넌트에서 부수 효과를 수행할 수 있게 해줍니다. 이 훅은 컴포넌트와 시스템을 연결하여 브라우저 DOM, 네트워크, 다른 라이브러리와의 동기화를 가능하게 합니다. useEffect는 두 개의 인수를 받으며, 두 번째 인수는 선택 사항입니다.

**참고 : 일부 효과는 더 이상 필요하지 않은 리소스를 정리해 성능을 유지하기 위해 정리 작업(cleanup)이 필요합니다.
타임아웃, 구독, 이벤트 리스너와 같이 더 이상 필요하지 않은 효과들은 제거해야 합니다. 이를 위해 useEffect 훅의 마지막에 반환 함수(return function)를 포함하여 정리 작업을 수행합니다.**

 

• useMemo 훅 : 메모이제이션은 값을 캐싱하여 다시 계산할 필요가 없도록 하는 방식입니다. 도한  useMemo 훅은 종속성 중 하나가 업데이트될 때만 실행됩니다. useMemo 훅의 첫번째 파라미터로 콜백 함수, 두번째 파라미터로 배열을 저정합니다. useMemo 훅은 비용이 많이 드는 리소스 집중적인 함수가 불필요하게 실행되지 않도록 할 때 유용하게 사용할 수 있습니다.

 

• useCallback 훅 : 종속성이 변경될 때만 갱신되는 메모이제이션된 콜백 함수를 반환합니다. useMemo와 useCallback 훅은 유사하지만, 주요 차이점은 useMemo가 메모이제이션된 값을 반환하는 반면 useCallback은 메모이제이션된 함수를 반환한다는 점입니다. useCallback을 사용하는 이유 중 하나는 컴포넌트의 props가 변경되지 않는 한 리렌더링을 방지하기 위해서입니다.

자식 컴포넌트(ChildComponent)는 habdleclick을 props로 받고 React.memo로 래핑되어, props가 변경되지 않는 한 리렌더링되지 않게 합니다. handleclick의 의존성이 []이로 설명하여 컴포넌트가 리렌더링될 때마다 새로운 함수가 생성되지 않고 한 번만 생성됩니다. useCallback을 사용하여 handleclick이 리렌더링 간에 동일하게 유지되도록 함으로써 count나 otherCount가 업데이트될 때 ChildComponenent 가 불필요하게 리렌더링되는 것을 방지할 수 있습니다.

 

• useReducer 훅 : 상태 변수와 이를 갱신하는 로직을 포함한 리듀서 함수를 제공합니다. 여러 개의 상태를 복잡한 로직에 따라 관리해야 할 때 useReducer가 유용할 수 있습니다. useReducer 훅은 현재 상태와 dispatch 메서드를 반환합니다.

추가, 삭제, 완료 처리와 같은 모든 로직을 하나의 useReducer 훅에 더 많은 액션을 추가하여 통합할 수 있습니다.

 

참고 자료 :
https://www.w3schools.com/react/react_hooks.asp

W3Schools.com

https://www.geeksforgeeks.org/reactjs-hooks/

React Hooks - GeeksforGeeks

https://react.dev/reference/react/hooks

Built-in React Hooks – React

https://velog.io/@shyuuuuni/FE-%EC%9D%B8%ED%84%B0%EB%B7%B0-%EC%A4%80%EB%B9%84-%EB%A6%AC%EC%95%A1%ED%8A%B8