[React, RN] 리액트 훅(React Hooks) 소개👍

리액트는 2013년에 처음 등장한 이후로 지속적으로 진화해왔고, 그 중 하나가 바로 리액트 훅(React Hooks) 입니다. 훅은 2018년에 리액트 16.8 버전에서 도입되었으며, 함수형 컴포넌트에서 상태와 라이프사이클 기능을 사용할 수 있게 해주는 기능입니다. 그 이전까지는 클래스형 컴포넌트에서만 상태 관리나 라이프사이클 메서드를 사용할 수 있었는데, 훅을 통해 함수형 컴포넌트에서도 이를 처리할 수 있게 되었습니다.

훅이란 무엇인가?

리액트 훅은 함수형 컴포넌트에서 상태 관리, 부수 효과(side effect) 관리, 컨텍스트 사용 등 여러 기능을 가능하게 하는 함수입니다. 훅을 사용하면 컴포넌트가 더 간결하고 읽기 쉽게 작성되며, 재사용성도 증가합니다.

훅의 주요 특징

함수형 컴포넌트에서만 사용할 수 있습니다.
리액트의 상태 관리와 부수 효과 처리 등을 가능하게 합니다.
컴포넌트의 생명 주기 메서드를 더 간단하고 직관적으로 다룰 수 있습니다.
주요 리액트 훅
리액트 훅에는 다양한 종류가 있지만, 그 중에서 가장 많이 사용되는 기본 훅들은 다음과 같습니다.

1. useState

useState 훅은 컴포넌트 내에서 상태를 관리하는 데 사용됩니다. 클래스형 컴포넌트에서는 this.state와 this.setState를 사용했지만, 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 선언하고 업데이트합니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

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

2. useEffect

useEffect 훅은 컴포넌트가 렌더링된 후 특정 작업을 수행할 수 있게 해주는 훅입니다. 예를 들어, 데이터를 fetching하거나, DOM 업데이트 후에 side-effect 작업을 처리할 때 사용합니다. 클래스형 컴포넌트에서의 componentDidMount, componentDidUpdate, componentWillUnmount 같은 생명주기 메서드의 역할을 합니다.

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setSeconds(prev => prev + 1), 1000);
    return () => clearInterval(interval); // 컴포넌트가 언마운트될 때 인터벌을 클리어합니다.
  }, []); // 빈 배열을 넣으면 컴포넌트가 마운트될 때만 실행됩니다.

  return <p>Time: {seconds}s</p>;
}

3. useContext

useContext 훅은 리액트의 컨텍스트(Context)를 사용할 때 쓰입니다. 컨텍스트는 트리 구조에서 데이터를 전역적으로 전달할 때 사용하며, useContext 훅을 통해 부모 컴포넌트에서 내려준 데이터를 자식 컴포넌트에서 간편하게 사용할 수 있습니다.

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedComponent() {
  const theme = useContext(ThemeContext);
  return <div>The current theme is {theme}</div>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
}

4. useRef

useRef 훅은 컴포넌트가 렌더링되어도 값이 유지되는 참조(ref)를 만듭니다. 주로 DOM 요소에 접근하거나, 렌더링 간에 유지되어야 할 값을 저장하는 데 사용됩니다.

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

5. useMemo & useCallback

useMemo는 계산 비용이 많이 드는 연산을 최적화할 때 사용합니다. 의존성 배열의 값이 변경되지 않으면 이전에 계산된 값을 재사용합니다.
useCallback은 함수를 메모이제이션할 때 사용합니다. 함수가 불필요하게 다시 생성되는 것을 방지할 수 있습니다.

import React, { useState, useMemo } from 'react';

function ExpensiveComputation({ number }) {
  const expensiveResult = useMemo(() => {
    return number * 2; // 계산 비용이 높은 연산
  }, [number]);

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

훅 사용 시 주의사항
훅은 항상 최상위에서만 호출해야 합니다. 조건문이나 반복문 내에서 호출되면 안 됩니다.
훅은 함수형 컴포넌트 내에서만 사용해야 하며, 클래스형 컴포넌트에서는 사용할 수 없습니다.
훅의 의존성 배열(특히 useEffect, useCallback, useMemo에서)을 정확하게 설정해야 합니다. 의존성 배열을 잘못 설정하면 렌더링 최적화가 잘못될 수 있습니다.

리액트 훅의 장점
가독성: 함수형 컴포넌트로 코드를 작성하면, 클래스형 컴포넌트보다 코드가 간결하고 이해하기 쉬워집니다.
재사용성: 훅을 커스터마이즈하여 여러 컴포넌트에서 동일한 로직을 재사용할 수 있습니다.
성능 최적화: useMemo, useCallback 등을 활용하면 성능을 최적화할 수 있습니다.

마무리

리액트 훅은 함수형 컴포넌트에서 상태, 부수 효과, 참조 등을 다루는 데 큰 장점을 제공하며, 코드의 간결함과 가독성을 높여줍니다. 리액트의 훅 시스템은 더욱 직관적인 개발 경험을 제공하고, 리액트의 진화를 이끄는 중요한 요소입니다. 리액트에서 훅을 잘 활용하는 방법을 익히면, 더 효율적이고 유지보수하기 좋은 애플리케이션을 개발할 수 있습니다.