240521 TIL

리액트 훅

리액트 훅은 리액트 16.8에 도입된 기능으로, 함수형 컴포넌트에서도 상태와 라이프사이클 관련 기능을 사용할 수 있게 해주는 도구이다. 이를 통해 클래스형 컴포넌트의 필요성을 줄이고, 함수형 컴포넌트의 사용을 촉진할 수 있다. 주요 훅에는 useState, useEffect, useContext등이 있다.

useState 훅

어제 쓴 TIL에 자세히 설명해 놨다.
https://velog.io/@jvn/240520-TIL

useEffect 훅

useEffect 훅은 함수형 컴포넌트에서 사이트 이펙트를 수행할 수 있게 해준다. compoeneDidMount, componentDidUpdate, componentWillUnmount의 기능을 합친 것으로 볼수 있다.

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

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(timer); // 컴포넌트가 언마운트될 때 타이머를 정리함
  }, []);

  return <div>타이머: {count}초</div>;
}

useContext 훅

useContext훅은 리액트의 컨택스트를 쉽게 사용할 수 있게 해준다. 컴포넌트 트리에서 전역적으로 데이터를 공유할 수 있는 방법을 제공한다.

import { useContext } from 'react';

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

function ThemedComponent() {
  const theme = useContext(ThemeContext);
  
  return <div>현재 테마: {theme}</div>;
}

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

이 훅들을 사용하면 함수형 컴포넌트에서도 상태 관리와 사이드 이펙트를 처리할 수 있어, 코드의 가독성과 재사용성이 높아진다는 점이 인상적이였다.