[React Native] 훅(hook) 내용 정리

훅(hook)이란?

React Native에서 “훅(hook)”은 React의 기능을 확장하여 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 기능입니다. React와 React Native 모두에서 훅은 비슷한 방식으로 작동하지만, React Native는 모바일 환경에 맞는 추가 훅들을 제공합니다.

많이 사용되는 훅 종류

1. useState

컴포넌트의 상태(state)를 관리하기 위해 사용되는 훅. useState는 상태변수, 상태변수를 업데이트하는 함수 2개를 반환합니다.

• 간단한 예제 ```javascript import React, { useState } from ‘react’;

const Counter = () => { const [count, setCount] = useState(0); // count 변수 초기값을 0으로 지정. 해당 count 변수를 업데이트하는 함수는 setCount

return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); };

useState는 위와 같이 앱 화면에 동적으로 업데이트해야하는 내용에 대한 변수를 지정할 때 사용합니다. 위 예제에서는 버튼을 누를 때마다 Count라고 적힌 텍스트 옆에 숫자가 0에서부터 1씩 더해져 화면에 다시 랜더링됩니다.

### 2. useMemo
성능 최적화를 위해 사용하는 훅. 계산 비용이 큰 값은 화면이 랜더링될 때마다 계산하면 성능에 문제를 일으킬 수 있기 때문에 `비용이 많이 드는 계산 결과값`을 useMemo 훅을 통해 메모이제이션 방식으로 저장해 이용한다.

- 간단한 예제
```javascript
import React, { useMemo, useState } from 'react';

const ExpensiveComponent = ({ num }) => {
  const expensiveResult = useMemo(() => {
    return ((((num * 2 )+3)/10)-7)*94;  // 해당 로직은 그렇게 복잡한 로직은 아니지만 해당 로직이 굉장히 복잡한 수식이라고 가정하자
  }, [num]); // 성능 최적화를 위해 num이 변경될 때만 재계산한다

  return <div>{expensiveResult}</div>;
};

useMemo는 위와 같이 의존성으로 추가된 항목이 변경될 때만 동작합니다. 해당 항목이 변경되지 않는다면 메모이제이션된 이전 계산 결과를 그대로 사용하여 재계산하지 않습니다.

3. useCallback

useMemo와 비슷하다. 똑같이 메모이제이션을 활용하지만 useMemo와 달리 useCallback은 함수 재생성을 방지한다.

• 간단한 예제 ```javascript import React, { useCallback, useState } from ‘react’;

const ParentComponent = () => { const [count, setCount] = useState(0);

const handleClick = useCallback(() => { console.log(‘Button clicked’); }, []); // 빈 배열로 설정하여 함수가 한 번만 생성되도록 함

return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> <button onClick={handleClick}>Click me</button> </div> ); };

### 4. useEffect
컴포넌트의 생명주기(마운트, 업데이트, 언마운트)와 관련된 사이드 이펙트를 처리합니다.

- 간단한 예제
```javascript
import React, { useEffect, useState } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 컴포넌트가 마운트될 때, 업데이트될 때
    console.log('mount');

    // 컴포넌트가 언마운트될 때
    return () => {
      console.log('unmount');
    };
  }, []); // 해당 의존성 배열 안에 넣어둔 컴포넌트가 업데이트될 때 useEffect를 실행함. 빈 배열일 경우 마운트될때만 한 번 실행

  return ... ;
};