[React] Hook

📌React Hook이란?

• React 16.8에서 도입된 기능으로, 함수형 컴포넌트에서 상태(state)관리와 생명주기 기능을 사용할 수 있게 해주는 함수들입니다
• react가 제공하는 특별한 기능으로, 컴포넌트에 이 기능들을 '추가'할 수 있다. 마치 레고 블록처럼 필요한 기능을 가져다 붙이는거라고 생각하면 쉽게 이해할 수 있습니다. 

 

◦ HooK사용규칙

• 컴포넌트의 최상위 레벨에서만 호출해야한다.
• React함수형 컴포넌트 내부에서만 사용가능하다

 

◦ Hook의 장점

• 코드가 더 간결하고 읽기쉽다
• 로직 재사용이 쉽다
• 관련 있는 코드들을 한곳에 모을 수 있다. 

 

◦ 주요 Hook들

1) useState - 상태 관리의 기본 

• 변수의 기본값 
• useState는 항상 두 가지를 반환합니다 현재 값과 그 값을 변경하는 함수
• 초기값은 useState()의 괄호 안에 넣어줍니다

function MyComponent() {
  const [name, setName] = useState("김철수");
  // name: 현재 상태값
  // setName: 상태를 변경하는 함수
  
  return (
    <div>
      <p>이름: {name}</p>
      <button onClick={() => setName("홍길동")}>
        이름 변경
      </button>
    </div>
  );
}

 

 

 

2) useEffect - 부수 효과 처리

• 리액트 컴포넌트에서 side effects(부수효과)를 처리하기 위해 사용되며, state를 감시하는 역할로 state가 변경되었을때 어떠한 동작을 실행해줌
• 중괄호 뒤에 변수를 넣을 수 있음 
• 의존성을 주입한다

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 컴포넌트가 화면에 나타날 때 사용자 정보를 가져옴
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data));
      
    // 컴포넌트가 사라질 때 실행됨
    return () => {
      console.log("컴포넌트 정리");
    };
  }, []); // 빈 배열: 처음 한 번만 실행

  return <div>{user?.name}</div>;
}

 

 

3) useMemo - 값을 재사용

• 과거에 계산한 값을 반복해서 사용할때, 그 값을 캐시에 저장하는것
• 특정 값들이 변경될 때만 다시 계산하고, 변경되지 않으면 이전 결과를 재사용

import { useMemo, useState } from 'react';

function ExpensiveCalculation() {
  const [number, setNumber] = useState(1);
  const [darkMode, setDarkMode] = useState(false);

  // number가 변경될 때만 다시 계산
  const expensiveResult = useMemo(() => {
    console.log("복잡한 계산 실행!");
    return number * number * 1000;
  }, [number]); // number가 바뀔 때만 실행

  return (
    <div style={{ background: darkMode ? 'black' : 'white' }}>
      <input 
        type="number" 
        value={number} 
        onChange={(e) => setNumber(parseInt(e.target.value))} 
      />
      <button onClick={() => setDarkMode(!darkMode)}>
        테마 변경
      </button>
      <p>계산 결과: {expensiveResult}</p>
    </div>
  );
}

 

4) useCallback - 함수를 재사용

• useMemo의 함수버전, 반복적으로 사용되는 함수를 캐시에 저장 
• 특히 자식 컴포넌트에 함수를 props로 전달할 때 유용

import { useCallback, useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // count가 변경될 때만 함수가 새로 생성됨
  const handleClick = useCallback(() => {
    console.log("현재 카운트:", count);
    setCount(count + 1);
  }, [count]); // count가 바뀔 때만 함수 재생성

  return (
    <div>
      <input 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
      />
      <ChildButton onClick={handleClick} />
      <p>카운트: {count}</p>
    </div>
  );
}

// 자식 컴포넌트
function ChildButton({ onClick }) {
  console.log("자식 컴포넌트 렌더링!");
  return <button onClick={onClick}>증가</button>;
}

 

5) useRef - DOM요소 접근이나 값 보관

•  html요소나 컴포넌트의 메모리 주소를 가져와 객체형식으로 관리

function InputFocus() {
  const inputRef = useRef();

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

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>입력란 포커스</button>
    </div>
  );
}